Component

Input

Labelled text field with hint, error and affix-icon support.

Input.jsx Input.d.ts Input.prompt.md Open raw preview HTML

Live demo

Rendered with the actual component source, not a re-implementation.

Full name

We'll only use this to confirm your order.

Search catalogue

Quantity

Enter a number between 1 and 12.

Disabled

Usage

import { Input } from "./Input.jsx";

<Input label="Full name" placeholder="Ada Okafor" required />
<Input label="Email" type="email" hint="We'll only use this to confirm your order." />

Props

Input props — see the source .d.ts for the complete type.
Prop	Type	Default	Description
`label`	`ReactNode`	—	Field label rendered above the control.
`hint`	`ReactNode`	—	Helper text shown below when there is no error.
`error`	`ReactNode`	—	Error message; sets invalid styling and replaces the hint.
`required`	`boolean`	`false`	Append a rust asterisk to the label.
`iconLeft`	`ReactNode`	—	Icon node inside the field, leading edge.
`iconRight`	`ReactNode`	—	Icon node inside the field, trailing edge.