INPUT

<Input>input.tsx

G2G

VARIANTS

Default

Filled

Ghost

Underline

SIZES

h-6 / 24px

h-7 / 28px

h-8 / 32px

h-9 / 36px

h-10 / 40px

h-12 / 48px

h-15 / 60px

STATES

Explicit assertion overrides — caller-driven, wins over `color`

Default

Valid (state="valid")

Invalid (state="invalid")

Warn (state="warn")

Brand (state="brand")

Disabled

COLORS

default

brand

pos

neg

warn

defaultbrandposnegwarnresthoverfocusvalidinvaliddisabled

COLORS — UNDERLINE

default

brand

pos

neg

warn

defaultbrandposnegwarnresthoverfocusvalidinvaliddisabled

CARD SURFACE

MUTED / NAV SURFACE

PAGE SURFACE

FORM EXAMPLE

First Name

Last Name

Password

SEARCH INPUT

<SearchInput>search-input.tsx

VARIANTS

Input wrapper with leading search glyph

Default

size="xs" (h-6 / 24px) — toolbars, header rails

With value

STATES

Hover and focus each input to preview its state — these are the live styles, not mocks

Resting — placeholder text-quat, border strk-weak, icon text-quat

Hover — placeholder text-scnd, border strk-weakmid, icon text-scnd (hover me)

Focus — border pos-scnd, caret pos, no ring (tab or click in)

Disabled — opacity 50, pointer-events none

TEXTAREA

<Textarea>textarea.tsx

VARIANTS

Multi-line text input

Default (min-h-20)

With value

Disabled

Error state (aria-invalid)

INPUT ACTION

<InputAction>input-action.tsx

SIZES

default

2xl

3xl