← All matrices

Input

Single input atom with slots for label / error / prefix / suffix. State matrix shown via pseudo classes.

Source react/src/atoms/Input.tsx Bundle 1.22 KB min / 0.62 KB gz LOC 58

Slot × State

Variant Default Hover Focus Error Disabled
plain
with prefix
@
@
@
@
@
with suffix
show
show
hide
!
show

With label + error message

LabelDefaultError
Email
Please enter a valid email
Props: label, error, prefix, suffix, containerClassName + all native input attrs.
forwardRef: yes (HTMLInputElement). useId: auto-generated when id not provided.