BriteInput

Sharedcomponent✓ stamped

Text, textarea, and number inputs with the brand field treatment.

@brite-nites/design-system/primitives/brite-input

Linear-style compact text inputs. Three sizes (sm 24px / md 28px / lg 32px). Focus state uses a brand stroke + halo + subtle white inner glow. Stripes on disabled match the button system.

Sizes

sm 24px / md 28px (default) / lg 32px. Text scales 12 / 13 / 14px.

States

Rest, focus (click in to see ring), disabled, invalid. Type to populate.

With left icon

Pass a Phosphor (or any) icon via the leftIcon prop.

With right addon

Static text or element (e.g. units, currency symbol). Non-interactive.

BriteNumberInput

Number entry with custom +/- steppers (browser native ones removed). Steppers respect min / max / step. Focus ring wraps the entire control.

Quantity (no bounds)

Margin (0–100%)

Price

Disabled

BriteTextarea

Multi-line. Same chrome, focus ring, and disabled treatment. Optional auto-grow.

Fixed (3 rows, manually resizable)

Auto-grow

Invalid

Disabled