Text fields


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


Selected item

Selected item & hover


Selected item

Selected item & hover


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


Clear button as icon

Clear button as link

With tags


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.