Components
Input
A single-line text field, with search and password types, icons, prefix and suffix text, and FormField to pair it with a label and hint.
Playground
As on your ID
Figma variant
🎛 Type=Text
👕 Size=Medium
🕹 State=Default
Icon (L)=False
Icon (R)=False
Error=False
Disable=False
Device=Desktop
Form Input: Align=Vertical, Show Label=True, Show Hint=TrueTypes
Text is the default. Search has a filled look with the search icon. Password hides the value and adds a show/hide toggle. Prefix and suffix text cover the Leading and Trailing Text types.
.ladom.co
Sizes
| Size | Height | Padding (y / x) | Radius | Text | Icon |
|---|---|---|---|---|---|
| medium | 40px | --layout-tiny / --layout-default | --radius-form-element | ui/text/regular | 16px |
| small | 32px | --layout-tiny / --layout-small | --radius-form-element-small | ui/text small/regular | 16px |
States
The border carries the state: neutral at rest, primary tint on hover, primary with the focus ring on focus, low emphasis once filled, error color with an icon on error.
With label and hint
Form Input puts the label above or beside the field and the hint below it. Form Spacing adds the form gutter under the whole group.
As on your ID
Tokens
| State | Border | Fill | Ring |
|---|---|---|---|
| Default | --color-surface-level-4 | --color-surface-level-1 | — |
| Hover | --color-primary-tint | --color-surface-level-1 | — |
| Focus | --color-primary | --color-surface-level-1 | --shadow-focus-primary |
| Typed | --color-foreground-low-emphasis | --color-surface-level-1 | — |
| Error | --color-error | --color-surface-level-1 | focus: --shadow-focus-error |
| Disabled | --color-surface-level-4 | --color-surface-level-2 | — |
| Search | --color-surface-level-2 | --color-surface-level-2 | — |
Notes from Figma
- Large exists only for the Mobile device in Figma; the desktop sizes are Medium and Small.
- Both Leading Text and Trailing Text show their extra text after the value. Code offers prefix (before) and suffix (after).
- Figma has an Error + Focus variant; code shows the error border with the error focus ring.
- Not built yet: Floating Label, GSM, File, Drag&Drop, Color Picker, Color Input, Chip and Code types, and Textarea.
Figma to code
| Figma | React |
|---|---|
| 🎛 Type = Text / Search / Password | type='text' / 'search' / 'password' |
| 🎛 Type = Leading Text / Trailing Text | prefix="…" / suffix="…" |
| 👕 Size = Medium / Small | size='medium' / 'small' |
| 🕹 State = Hover / Focus / Typed | :hover / :focus-within / filled value |
| Icon (L) / Icon (R) | iconLeft={…} / iconRight={…} |
| Error = True | error (or FormField error) |
| Disable = True | disabled |
| Form Input: Align / Form Spacing | <FormField align='…' spacing> |