Skip to content
UI Kit
Accent color

Form components and inputs

Inputs, textareas, selects, checkboxes, radios, switches, sliders, search fields and form layouts.

9 components · 22 variants
Switch category

Every field a form needs

Forms are where a website asks for something, and each field is a small decision for the visitor. The nine components here are the building blocks, each with a visible label, a hint, an error written as text and the right input type, so phones show the right keyboard.

Input covers text, email, phone and password with icons and addons. Textarea grows with its content and counts characters. Select is a listbox with search and groups, or the styled native select for long lists on phones. Checkbox, Radio group and Switch handle choices, Switch only for settings that apply at once. Slider picks a value or a range, Search field adds a shortcut and a clear button, Form layouts shows complete forms built from all of them.

Use one column for forms, people read top to bottom. Validate when a field is left, not on every key. Mark optional fields instead of required ones when most fields are required. For long forms the kit has a multi-step form that keeps every answer.

On this page

Every component of this category. Pick one to jump to its variants.

input

Input

Text input with label, hint, error as text, icons, prefix, suffix and addons.

Props and details · Input

States

Label, hint, optional, required, error, success and disabled. The focus ring fades in, an error shakes once, a valid phone number draws a check. Errors are text, never color alone.

Icons and addons

Leading icon, inline prefix and suffix, attached segments and a button inside.

Sizes

Small, medium and large, each as tall as the button of the same size. The last one has a floating label, 56 px tall, it rises when you type.

Password

Show and hide with a labelled button, a link in the label row and an error.

form-layout

Form layouts

Complete forms from the kit fields: contact, job application and settings, with sections, grid and actions.

Props and details · Form layouts

Contact

Two columns on wide screens, one on phones. The fields rise one after another as the form scrolls in, sending turns the button into a check.

Application

Sections on top of each other, an error summary that links to each field, upload and tags. Sending with open errors shakes the button and names what is left.

Settings

Title and explanation on the left from desktop up, fields on the right, actions at the end.

radio-group

Radio group

One choice from a few, on native radios: as a list, as cards with prices or as tiles with icons.

Props and details · Radio group

List

Vertical or in a row. The point springs in, arrow keys move the choice, a missing answer shows as text.

Cards

Each option a surface with description, price and an optional tag. The ring glides to the new choice and settles with a light overshoot.

Tiles

Centered tiles with an icon for visual choices, three across from tablet up.

checkbox

Checkbox

Real checkboxes in the kit look: label, description, mixed state, groups, cards and errors as text.

Props and details · Checkbox

States and groups

The check draws itself and the box springs. "Select all" turns mixed when some rows are on, a group shares one legend and one hint.

Cards

The whole option is the target. Checked cards take a soft accent edge.

search-field

Search field

The search box with a shortcut, clear button, Escape to clear, loading and a submit button.

Props and details · Search field

Search field

Ctrl K or ⌘K focuses it from anywhere and the key caps press down. Focus widens the box a hair, a typed query gets a clear button, a running search a spinner.

In a header

The soft style without a border sits quietly in toolbars and turns white on focus.

select

Select

The kit listbox with icons, descriptions, groups and full keyboard support, plus the styled native select.

Props and details · Select

Listbox

The list unfolds from the field, its rows follow one after another, one mark slides to the active row. Arrows, Home, End and typing move through it.

Native

The browser select in the kit look. Best for long lists on phones and in long forms.

slider

Slider

A styled native range: one value or a range with two thumbs, formatted values and marks.

Props and details · Slider

Values

The value in the format of the language, read out the same way to screen readers. The fill grows in as it scrolls into view, the thumb grows while you drag and a bubble follows it.

Steps and marks

Fixed steps with labelled marks for choices that are really a scale.

switch

Switch

On and off for settings that apply right away, with role="switch", as a list or as rows.

Props and details · Switch

Settings list

Label and description left, the switch right, as people know it from their phone. The knob springs across and draws a small check.

Rows with icons

Each setting on its own surface, with an icon that names the topic.

textarea

Textarea

Multi-line text that grows with its content, with a counter, a footer and an error as text.

Props and details · Textarea

States

Grows while you type, the counter turns strong near the limit and red beyond it, and the box shakes once when you go over.

Composer

A footer row with tools and the send button, as in comments and chats.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Forms and inputs on a page.

Often searched

Jump to

Copied to the clipboard