Input

A styled text input for capturing user data. Features border-2 styling, focus ring, and seamless integration with Field for labels, hints, and validation.

Default

<Input placeholder="Enter your name" />

Disabled

<Input disabled placeholder="Cannot edit this" />

With Field

Email address

We will never share your email.

Username

Username is already taken.

<Field>
  <FieldLabel>Email address</FieldLabel>
  <Input type="email" placeholder="you@example.com" />
  <FieldHint>We will never share your email.</FieldHint>
</Field>

<Field error={true}>
  <FieldLabel>Username</FieldLabel>
  <Input placeholder="Choose a username" />
  <FieldError>Username is already taken.</FieldError>
</Field>

File Input

<Input type="file" />

API Reference

Prop	Type	Default	Description
`type`	`string`	`"text"`	The HTML input type. Supports all native types including text, email, password, number, file, etc.
`placeholder`	`string`	—	Placeholder text shown when the input is empty.
`disabled`	`boolean`	`false`	When true, prevents interaction, reduces opacity, and applies a sunken background.
`className`	`string`	—	Additional CSS classes to apply to the input element.