Input components

Input, Textarea, and InputNumber share the same design tokens and state styles. The variants below cover every combination of size, validation status, and mode that consumers can pass.

Input

Sizes

Three size variants. Default mode (no shadow), no status.

small
medium
large

Validation status

Each status drives both the input box-shadow and the message icon/text color.

default
Helper text
success
This is a success message
error
This is a error message
warning
This is a warning message

Shadow mode

Elevated variant. Same status logic, different base shadow.

shadow / default
shadow / success
Shadow success
shadow / error
Shadow error
shadow / warning
Shadow warning

Disabled

Disabled state in both modes uses a tinted gradient background.

default / disabled
This field is disabled
shadow / disabled
This field is disabled

Prefix & suffix

Slot any content. Padding adjusts automatically based on prefix/suffix width.

prefix only
suffix only

10

prefix + suffix

C

10

Textarea

Sizes

Sizes affect padding only; height comes from rows.

small
medium
large

Validation status

default
Helper text
success
This is a success message
error
This is a error message
warning
This is a warning message

Shadow mode

shadow / default
shadow / success
Shadow success
shadow / error
Shadow error
shadow / warning
Shadow warning

Disabled

default / disabled
This field is disabled
shadow / disabled
This field is disabled

Resize behavior

autoResize grows up to maxRows, then scrolls. Manual resize is for fixed-height textareas.

autoResize (max 5 rows)
fixed / resizable
fixed / non-resizable

InputNumber

Sizes

Same size scale as Input, with built-in increment/decrement handlers on the right.

small
medium
large

Validation status

default
Helper text
success
This is a success message
error
This is a error message
warning
This is a warning message

Shadow mode

shadow / default
shadow / success
Shadow success
shadow / error
Shadow error
shadow / warning
Shadow warning

Disabled

default / disabled
This field is disabled
shadow / disabled
This field is disabled

Prefix & suffix

Suffix is automatically offset to the left of the increment/decrement handlers.

prefix only
prefix + suffix

C

10

Formatter & parser

Round-trip the displayed value through a formatter (display) and parser (raw).

thousands separator
currency