Input

A flexible text input component built on React Aria's Input component with consistent styling and accessibility features.

Props

Prop	Type	Default	Description
`label`	`string`	-	Optional label text displayed above the input
`placeholder`	`string`	-	Placeholder text shown when input is empty
`value`	`string`	-	Controlled value
`defaultValue`	`string`	-	Initial value for uncontrolled mode
`onChange`	`(value: string) => void`	-	Called when input value changes
`isDisabled`	`boolean`	`false`	Whether the input is disabled
`isReadOnly`	`boolean`	`false`	Whether the input is read-only
`isRequired`	`boolean`	`false`	Whether the input is required
`type`	`text \| search \| url \| tel \| email \| password`	`'text'`	HTML input type (text, email, password, etc.)

Extends all React Aria TextFieldProps.

Usage Examples

Default Input

tsx

<Input placeholder="Enter text..." />

With Label

tsx

<Input label="Username" placeholder="Enter your username" />

With Default Value

tsx

<Input label="Name" placeholder="Enter your name" defaultValue="John Doe" />

Disabled State

tsx

<Input label="Disabled Input" placeholder="Cannot edit" defaultValue="Disabled value" isDisabled />

Read-Only State

tsx

<Input label="Read-Only Input" placeholder="Cannot edit" defaultValue="Read-only value" isReadOnly />

Password Input

tsx

<Input label="Password" type="password" placeholder="Enter your password" isRequired />

Search Input

tsx

function SearchInputDemo() {
  const [searchQuery, setSearchQuery] = useState('');

  return <Input placeholder="Search..." type="search" value={searchQuery} onChange={setSearchQuery} />;
}

Styling

CSS Variables

The component uses the following CSS variables for theming:

--color-bg: Input background color
--hl-sm: Standard border color
--hl-lg: Highlight for focus/active
--color-danger: Error/invalid state color

You can customize these variables in your CSS to theme the input appearance.