Forms

Input

A text control and nothing else. The label, the description and the error belong to Field, which also wires the ids between them.

Size

Height, inset and type all step together. The heights are Button's and Select's, so a field and its submit line up.

<Input size="s" placeholder="Small" />
<Input size="m" placeholder="Medium" />
<Input size="l" placeholder="Large" />

m keeps its 16px type where Button's middle size runs at 15. Mobile Safari zooms the page when a field under 16px takes focus, and this is the default size.

State

Resting, invalid, disabled and read-only.

<Input placeholder="Resting" />
<Input aria-invalid defaultValue="0.0.1" />
<Input disabled defaultValue="Cannot edit" />
<Input readOnly defaultValue="Read only" />

The error appearance comes from aria-invalid, not from a variant prop. Field.Root sets that attribute from its own state, so there is no way to draw a red border on a control that still announces itself as valid.

Textarea

Resizes vertically only, because horizontal resize breaks whatever column the field sits in. It takes no size prop and is built to sit under an Input at m.

<Textarea defaultValue="Splits shadows into geometry and per-theme ink." />

In a Field

Field.Control passes the id and the aria attributes down.

Package name

Lowercase, no spaces.

<Field.Root required>
  <Field.Label>Package name</Field.Label>
  <Field.Control>{props => <Input {...props} placeholder="@scope/name" />}</Field.Control>
  <Field.Description>Lowercase, no spaces.</Field.Description>
</Field.Root>

Props

Prop	Type	Default	Notes
`size`	`'s' \| 'm' \| 'l'`	'm'	Input only. Matches Button and Select.
`aria-invalid`	`boolean`	—	Drives the error appearance. Usually set by Field.
`…`	`InputHTMLAttributes`	—	Everything else passes through to the element.