Text fields

Types

Selects make it possible to select one or more items from a (searchable) list. We have two versions depending on the background: Light & Dark.

Hover & selected

Hover

Selected item

Selected item & hover

Hover

Selected item

Selected item & hover

Search

When dealing with large datasets search becomes very handy. Search can be used to either refine a set of items, or to actively search a dataset.

Hover & active states reflect default text input behavior to indicate searchability

Refine list of items by searching

Active search

Clearable

Clear button as icon

Clear button as link

With tags

Sizes

Text fields have three key sizes: small, medium and large.

Custom options

The select component never changes but options within the select can have different content and can be styled in different ways.

Grouped items

Complex lists with many items can be grouped into nested lists for extra clarity.