Input

Inputs collect text from users. Prizma includes a standard text field, OTP cells for verification codes, and a multiline variant. All inputs share the same token layer for border, surface, and typography.

Try it live

Click in and type — focus ring and placeholder come from the input tokens.

Interactive — focus / type

Variants

Full name

Text field.input

The standard single-line field for names, emails, and free text.

OTP cells.input-otp

One cell per digit for verification codes. Focus advances automatically.

Tell us more…

Multiline.input-multiline

Grows for longer answers; used for notes and feedback.

Tokens

TokenRoleLayer

--input-surface-defaultInput backgroundComponent

--input-border-defaultBorder — restComponent

--input-border-focusBorder — focusedComponent

--input-border-errorBorder — errorComponent

--input-border-disabledBorder — disabledComponent

--input-text-defaultInput text colorComponent

--input-placeholderPlaceholder text colorComponent

--input-helper-errorError helper text colorComponent

--radius-inputCorner radiusSemantic

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.