Input Fields
The full input family from Figma: Input, Input dropdown, Input with label, Input with Search, Textarea, and Message input. All share the --input-field/* token namespace, so every state re-themes in dark mode.
Input — Size
Three heights: sm 36px, md 40px, lg 48px. Radius 4px, Plus Jakarta Sans Bold 14px.
Input — State
Empty, Filled, Focus (blue outline), Error (red tint + message), Disabled. These are the first interactive field below.
Input — Variations
Leading / trailing icon, leading prefix text, and a credit-card field. Icons are 20px, gap 8px.
Input dropdown
Input base with a trailing 24px chevron. Types add a leading element (icon, flag, avatar). Same five states.
Input with label
Label (Inter Bold 14px) above the field, with an optional trailing button, top description, or bottom description.
Input with Search
Leading magnifying-glass (20px) and an optional trailing info icon. Supports the same label / description slots.
Textarea
Multi-line input, radius 8px, min-height 160px, vertical resize handle. Five states.
Message input
Composer with a placeholder area and a toolbar: attach / emoji / mention on the left, send on the right. Radius 8px, min-height 152px.
Token Reference
| Token | Value | Usage |
|---|---|---|
| --input-field/default/outline-box | #cccccc | Default border |
| --input-field/active/outline-box-active | #191919 | Filled border + text |
| --input-field/focus/outline-box | #352eff | Focus border |
| --input-field/error/outline-box | #ff0000 | Error border / message / icon |
| --input-field/error/bg-box | #ff00001a | Error fill (10%) |
| --input-field/disabled/bg-box-disabled | #efefef | Disabled fill |
| --input-field/default/text-placeholder | #b2b2b2 | Placeholder text |
| --border/border-radius/sm · md | 4px · 8px | Input/dropdown · textarea/message |