Component docs

Input

Single-line text field with built-in label, hint and error wiring.

When to use

Change props on the right; the preview and code update instantly.

Work email

We only use this for notifications.

Props

label

placeholder

hint

error

size

required

disabled

<Input label="Work email" placeholder="ada@veraforge.co" hint="We only use this for notifications." size="md" />

Filter props

Prop	Type	Default	Description
`label`	`string`	`—`	Visible label, wired with htmlFor.
`hint`	`string`	`—`	Helper text linked via aria-describedby.
`error`	`string`	`—`	Error message; sets aria-invalid and aria-errormessage.
`size`	`sm \| md \| lg`	`md`	Field scale.
`startAdornment`	`ReactNode`	`—`	Content before the text (e.g. icon).
`endAdornment`	`ReactNode`	`—`	Content after the text (e.g. unit).
`required`	`boolean`	`false`	Native required plus a visual marker.
`disabled`	`boolean`	`false`	Native disabled state.
`containerClassName`	`string`	`—`	Class for the outer field wrapper.

Keys	Behavior
`Tab / Shift+Tab`	Move focus into / out of the field.
`Text keys`	Edit the value; native shortcuts (select all, undo) work.
`Clicking the label`	Focuses the field.

Attribute	Guidance
`aria-describedby`	Set automatically to link hint and error text.
`aria-invalid`	Set automatically when `error` is present.
`aria-errormessage`	Points to the role="alert" error message.
`aria-label`	Only when a visible label is truly impossible (e.g. search in a toolbar).

Every part of Input reads from these tokens, so it re-themes in light and dark automatically.

Part	Tokens
Shell	`--surface-raised--border-strong--radius-md--border-width`
Shell (focus)	`--primary--primary-subtle--halo-width`
Shell (error)	`--destructive--destructive-subtle`
Shell (disabled)	`--muted--opacity-disabled-field`
Text & placeholder	`--foreground--muted-foreground--text-sm--text-body--text-lg`
Label, hint, error	`--weight-medium--text-caption--destructive`
Spacing	`--space-2--space-3--space-4--space-5`

0 of 7 verified

Focus

Focused field shows a visible border change plus halo in both themes.

Contrast

Text 4.5:1 and placeholder 4.5:1 against the field fill.

Field border meets 3:1 against its surface.

Target size

Field height is at least 44px at md and lg; sm fields stay in dense layouts only.

Keyboard

Label click focuses the field; tab order follows reading order.

Screen reader

Label, hint and error are all announced on focus.

Errors are not signalled by color alone (text message present).

Check contrast numbers live on the Accessibility page.