Input

Text input and textarea with label, hint, and error states.

Input states

Full name

We'll never share your email.

Card number

Invalid card number.

Disabled

<Input label="Full name" placeholder="Jane Smith" />
<Input label="Email" hint="We'll never share your email." />
<Input label="Card number" error="Invalid card number." />
<Input label="Disabled" disabled />

Textarea

Notes

Optional.

<Textarea label="Notes" hint="Optional." />

File input

Browsers render their own button and “No file chosen” text for <input type="file">, which can’t be styled and broke out of the capsule. The native control is visually hidden but stays in the DOM and the tab order — a real label opens the picker, so keyboard behaviour is unchanged.

Upload roster CSV

Choose CSVNo file chosen

Select a file to see the name and the clear control appear.

Attachments

Choose filesNo file chosen

Contract

Choose fileNo file chosen

A signed contract is required.

Disabled

Choose fileNo file chosen

<FileInput label="Upload roster CSV" accept=".csv,text/csv" buttonLabel="Choose CSV" />
<FileInput label="Attachments" multiple />
<FileInput label="Disabled" disabled />