Components / Forms

Forms

Fields and controls for people to type and choose: Input, Select, Textarea, Checkbox, Radio and Toggle. Same heights as buttons (32, 40 and 48 px), border color-border-strong and the same focus ring.

Version 1.4 · Oct 20, 2026

Fields

Input for short text, Select to choose from a list and Textarea for long text. The label always goes on top and is visible; help text is optional.

Maximum 500 characters.

Field sizes

sm 32 px, md 40 px and lg 48 px: the same heights as Button, to line up fields and buttons in a row.

Field states

Default (border color-border-strong), Hover (color-border-hover), Focus (border color-action-default and ring color-focus-ring), Filled, Error (border and message in color-status-error-text; turns on Show helper) and Disabled.

Enter a valid email.

Controls

Checkbox for several options, Radio for a single option in a group and Toggle to turn something on right away. The border of the controls meets 3:1.

Tokens

Values linked in the form components.

Name (token)
Value
When to use it
color-border-strong
#7E92A5 · 3.21:1
Border of fields and controls in Default.
color-border-hover
alias of grey-700 #435260 · new
Border on Hover; track of the off Toggle on Hover.
color-action-default
#2164EE · 5.09:1
Border in Focus; active Checkbox, Radio and Toggle.
color-action-hover
#124EA1
Active controls on Hover.
color-status-error-text
#C13D02 · 5.34:1
Border and message on Error.
color-focus-ring
alias of color-action-default
Focus ring (2 px white + 2 px ring).
color-disabled-bg / -text
surface-subtle / text-muted
Disabled.
color-text-muted
#63707D · 5.07:1
Placeholder.
radius-md · radius-sm · radius-full
8 · 4 · 9999
Field · Checkbox · Radio and Toggle.
text-small · text-body · text-body-l
14 · 16 · 18 px
Field text in sm, md and lg.
label-button-sm
SemiBold 14/16
Field label.

Contrast

Text: minimum 4.5:1. Borders and controls: minimum 3:1 (WCAG 1.4.11).

Aa
Sample text
Label · text-primary on white
18.31
Excellent
Aa
Sample text
Value · text-primary on white
18.31
Excellent
Aa
Sample text
Placeholder · text-muted on white
5.07
Pass
Aa
Sample text
Help · text-secondary on white
8.03
Excellent
Aa
Sample text
Error · status-error-text on white
5.34
Pass
Aa
Sample text
Disabled · disabled-text on disabled-bg
4.62
Pass
Aa
Sample text
Border · border-strong on white
3.21
Pass
Aa
Sample text
Check · white on action-default
5.09
Pass
Aa
Sample text
Toggle · knob white on track border-strong
3.21
Pass

What to do and what to avoid

The @ is missing. E.g.: ana@empresa.com
✓
Do this

Visible label above the field and an error message that explains how to fix it.

✕
Avoid this

Using the placeholder as a label: it disappears when you type and not every screen reader reads it.

✓
Do this

Radio to pick a single option; Checkbox for several.

✕
Avoid this

Using Toggle in a form that is sent later: Toggle applies the change right away; use a Checkbox there.

Related pages

Components

Buttons

Same heights (32, 40 and 48 px) and the same focus ring.

See page
Identity

Color

Action, border and status colors.

See page
Foundations

Borders

border-width-default and radius.

See page