Input

Text input with built-in label, helper, error and icon slots. Uses semantic theme tokens.

Examples

Set label/required directly on Input — no need to compose with FormLabel.

Name*

<Input
  label="Name"
  required
  leftSlot={<User size={16} />}
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

We will never share your email.

<Input
  label="Email"
  type="email"
  leftSlot={<AtSign size={16} />}
  helperText="We will never share your email."
/>

Please enter a valid email.

<Input
  label="Email"
  leftSlot={<AtSign size={16} />}
  defaultValue="invalid-email"
  error="Please enter a valid email."
/>

Read-only

<Input label="Read-only" disabled value="Cannot edit" />

Props of the Input component.

Prop	Type	Default	Description
`label`	`string`	—	Renders FormLabel above the input.
`required`	`boolean`	`false`	Asterisk on label + native required.
`helperText`	`string`	—	Hint shown below. Ignored when error is set.
`error`	`string \| boolean`	—	Error message (or just visual state).
`leftSlot`	`ReactNode`	—	—
`rightSlot`	`ReactNode`	—	—
`variant`	`'outline' \| 'filled' \| 'underlined'`	`'outline'`	—
`labelProps`	`Partial<FormLabelProps>`	—	Pass-through to internal FormLabel.