PaperInput

Editorial form input with field labels and clear error handling.

↗ forms should read like forms, not puzzle boxes.

Preview

Email address

We will only send release notes.

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const paperInputVariants = cva(
  [

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperInput/paperInput.tsx⎘
Step 2.Create the barrel:
components/ui/paperInput/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperInput'
```

Variants

Default

Filled

Bordered

Error

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'filled' \| 'bordered'`	`default`	Input shell treatment.
`hasError`	`boolean`	`false`	Applies red underline error state.
`placeholder`	`string`	`undefined`	Hint text inside field.

Examples

Sign-up form

Pair with PaperField to keep labels and hints consistent.

Team name

Visible in URLs and docs.

<PaperField label="Team name"><PaperInput /></PaperField>

Validation error

Use hint channel for clear corrective instructions.

Please enter a valid email address.

<PaperInput hasError placeholder="name@domain.com" />