The input.

A single-line field with optional prefix, suffix, helper text, and clear button. Three variants, three sizes — the border carries the state, and accent is reserved for the moment of focus.

Anatomydata-slot

Search entries

input-prefixLeading glyph slot — not focusable

inputThe native field, placeholder ink

input-clearTrailing X when clearable + value

input-helperMessage below, aria-describedby

Variantsvariant

Defaultvariant="default"

Email address

Resting field — driftwood border, primary ink.

Errorvariant="error" · aria-invalid

avery@

Enter a valid email address.

Warningvariant="warning" · advisory

(555) 01

This number looks incomplete — no aria-invalid.

Sizesdata-size · design specification

Compact row

--control-h
32px

Default field

--control-h
36px · default

Comfortable form

--control-h
44px

Statesinteraction

Default

Full name

Hover

Full name

Focus-visible

Avery Lindqvist

Active

Avery Lindqvi

Disabled

Not editable

Skeleton

Focus draws a 3px terracotta ring (focus-visible:ring-2 ring-offset-2). Disabled dims to .5 with cursor-not-allowed. Every other state lives in neutral ink.

Usagedo · don't

Pair error with a written helper line — the icon and message carry meaning, never color alone.

Don't

Don't set variant="warning" for true failures — warning is advisory and never sets aria-invalid.

Propsui/input.tsx

Prop	Type	Default
variant	'default' \| 'error' \| 'warning'	'default'
data-size	'sm' \| 'md' \| 'lg'	md
error	boolean	false
prefix	ReactNode	—
suffix	ReactNode	—
helper	ReactNode	—
clearable	boolean	false
onClear	() => void	—
clearLabel	string	'Clear input'
warningLabel	string	'Warning'

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait