① Label
Visible label — required for accessibility
② Container
Rounded border + background
③ Placeholder / Value
Hint text or entered value
④ Icon slots
16×16 px — leading or trailing
⑤ Helper / Error
Persistent hint or error message
Examples
Interactive previews with copy-ready code. All inputs include keyboard focus rings, hover borders, and accessible error states.
Default input
A plain text field with a label and placeholder.
Sizes
sm (32px) suits compact UIs like table filters; md (40px) is the default for standard forms.
With leading icon
Leading icons provide visual context for the expected input type.
Password with visibility toggle
The eye icon toggles between masked and visible text. It is the most common trailing-icon pattern.
Minimum 8 characters
Clearable input
The × button appears when the field has a value and clears it on click.
With helper text
Persistent guidance below the field — don't replace it with the error message.
We'll send a confirmation link to this address.
Error state
The border turns red, a caution icon appears, and an error message is shown below. Never rely on colour alone.
Enter a valid email address.
Disabled state
Muted background and border signal the field is unavailable. Pair with a tooltip explaining why.
Contact your admin to change this.
Form example
Full-width inputs inside a form container — the most common real-world usage.
States
Anatomy
⑤ Helper text
① Label② Leading icon④ Trailing iconDesign tokens
| Token | Value | Description |
|---|---|---|
input/background/default | #ffffff | Default + focus background |
input/background/disabled | #e1e1e1 | Disabled / readonly background |
input/border/Default | #cccccc | Default border |
input/border/hover | #a3a3a3 | Hover border |
input/border/focus | #318272 | Focus border (brand) |
input/border/error | #bc1700 | Error border |
input/border/disabled | #e1e1e1 | Disabled border |
input/text/value | #3b3b3d | Entered value colour |
input/text/placeholder | #8f8f8f | Placeholder colour |
input/text/disabled | #8f8f8f | Disabled text colour |
focus/Ring | #acffef | Focus ring shadow colour |
Radius/sm | 4px | Corner radius |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible label above the input — strongly recommended for accessibility. |
placeholder | string | — | Hint shown when the field is empty. |
type | string | "text" | HTML input type — text, email, password, number, search, etc. |
size | "sm" | "md" | "md" | sm=32px · md=40px height. |
disabled | boolean | false | Muted state — blocks interaction. |
errorMessage | string | — | Activates error state and displays this message below the field. |
helperText | string | — | Persistent helper text shown below — hidden when errorMessage is set. |
leadingIcon | React.ElementType | — | Icon component rendered on the left inside the field. |
trailingIcon | "eye" | "clear" | ElementType | — | "eye" = password toggle · "clear" = dismissible · component = static icon. |
fullWidth | boolean | false | Stretches to fill parent container. |
Content guidelines
Do
- Always pair inputs with a visible label
- Use helper text for format hints (e.g. MM/DD/YYYY)
- Show error messages that explain how to fix the issue
- Use the appropriate input type (email, tel, number)
- Mark required fields consistently (e.g. asterisk + legend)
Don't
- ✕Use placeholder text as a substitute for a label
- ✕Show error state before the user has interacted
- ✕Use generic messages like "Invalid input"
- ✕Disable inputs without explaining why
- ✕Rely on colour alone to communicate errors