Skip to content
UI Kit
Accent color

Pickers and selections

Date, time and color pickers, number fields, comboboxes, multi selects and tag inputs that keep every choice in view.

7 components · 21 variants
Switch category

On this page

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

time-picker

Time picker

Pick a time of day as a segmented field, a list in steps with durations, scroll wheels, a clock face or a from to range. 24 hours in German, AM and PM in English.

Props and details · Time picker

Field

Hours and minutes are spin buttons. Type 7 4 5 and the field moves on by itself, arrows step, Backspace goes back. An empty field shows what it wants, a time before opening explains itself.

Open in Studio

List

Times in steps of 15 or 30 minutes, typing jumps to a time. The end list shows the duration from the start, an earlier end is marked, a later start carries the end along.

Open in Studio

Wheels

Scroll wheels that snap, as on a phone. Swipe, tap a row or use the arrow keys, the band marks the choice and the sentence below follows.

Open in Studio

Clock face

Drag the hand to the hour, it moves on to the minutes. The hand takes the short way round, arrows step, the note beside it changes for a late arrival.

Open in Studio

From to

Start and end in one field with the duration. Moving the start keeps the duration, an end after midnight says next day. Here as opening hours with a switch per day.

Open in Studio

color-picker

Color picker

Choose a color from named swatches, an editor with area, hue, eyedropper and HEX, RGB or HSL, or turn one color into a scale with contrast ratios.

Props and details · Color picker

Swatches

Named swatches as a radio group, arrows move and choose. The rainbow ring opens the system color dialog, the hex field takes any color, the drawn site takes it on at once.

Open in Studio

Popover

A trigger with swatch and hex, a panel with a field for saturation and brightness, a hue slider, before and after, the eyedropper where the browser has one, and recent colors.

Open in Studio

Inline editor

The full editor on the page, with a switch between HEX, RGB and HSL. Arrows move the field, Shift takes big steps, a calendar entry shows the color with readable text.

Open in Studio

Palette

One color becomes ten steps from 50 to 900, each with its contrast ratio to readable text and the WCAG grade. A tap copies the hex, the steps grow a little on hover.

Open in Studio

multi-select

Multi select

Pick several values with search, groups, counts and a limit. As chips in the field, a filter button, an open facet list or a stack of people.

Props and details · Multi select

Chips

The chosen values sit as chips in the field, typing filters the grouped list. Chips spring in, Backspace removes the last one, a counter shows the room left.

Open in Studio

Filter button

A button that names the filter and what is picked, a panel with search, counts, select all and clear. The table below follows every change.

Open in Studio

Facet list

Always open, for shop and search sidebars. A small search, counts per value, the first rows with Show all, and the result count follows.

Open in Studio

Stack

Search in the field, the chosen people stacked below with role and a remove button. A limit of three, someone away is shown but cannot be picked.

Open in Studio

number-input

Number input

A number field after the spin button pattern, in four looks. It steps, keeps to its limits, repeats while held and reads the number format of the language.

Props and details · Number input

Stepper

Buttons stacked at the end, two wide buttons on phones. Arrows step, Shift or Page keys take ten steps, Home and End jump to the limits. The total follows every change.

Open in Studio

Split

Minus and plus on both sides, for counts you tap rather than type. Limits depend on each other, the bar shows the beds taken.

Open in Studio

Cart quantity

Compact for cart lines. At the minimum the minus turns into a bin, a removed line leaves an undo in its place, and the subtotal counts along.

Open in Studio

Scrub

The design tool field. Drag the letter or the name sideways to change the value, Shift for big steps, Alt for fine ones, or type. A hairline shows where the value sits in its range, the preview follows live.

Open in Studio

date-input

Date input

Type a date in the local format or pick it from a calendar with full keyboard support. Ranges too.

Props and details · Date input

Field and calendar

The calendar unfolds from the field, its weeks come in one after another and the chosen day glides to its new place. Weekends are closed, Alt and Arrow down open it from the keyboard.

Range

Two months side by side from tablet up, one on phones. Days with bookings carry a dot.

combobox

Combobox

A text field that filters a list as you type, ignores accents, highlights the match and can create new entries.

Props and details · Combobox

Filter as you type

Matches in name and description, the typed part highlighted, new rows come in one after another and the mark glides with the arrow keys. Escape closes, a second Escape clears.

tag-input

Tag input

Several values in one field: Enter or comma adds, Backspace twice removes, pasted lists split on their own.

Props and details · Tag input

Tags

Suggestions as quick picks, a limit, a check per tag and an error as text. New tags pop in, removed ones shrink away, a refused one shakes the field.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Pickers and selections on a page.

Often searched

Jump to

Copied to the clipboard