Solaris Design System

Dropdown and select

Date and time pickers allow the user to pick their dates. There are emotive and productive date pickers, emotives are slightly larger whereas productive are smaller.

We also have variaties such as the date picker, a calendar option date picker and a start to end date picker.

To view these examples in light or dark theme switch the toggle on the top right.

Types

The table below shows you the various types of date picker.

Regular dropdowns has multiple dropdown options but not too much where the users is overwhelemd with them.

States Emotive
Type: body-emotive
Height: 48px
padding: 11px 16px		 Productive
Type: body-productive
Height: 40px
Padding: 8px 12px		 Inline
Type: body-inline
Height: 32px
Padding: 8px 4px
:enabled Enabled dropdown emotive theme light Enabled dropdown emotive theme dark Enabled dropdown productive theme light Enabled dropdown productive theme dark Enabled dropdown inline theme light Enabled dropdown inline theme dark
:selected Selected dropdown emotive theme light Selected dropdown emotive theme dark Selected dropdown productive theme light Selected dropdown productive theme dark Selected dropdown inline theme light Selected dropdown inline theme dark
Combobox

When there is a time where there are multiple options that are selectable, a combobox is used. You can see the examples below shows the searchable option when the user slects the dropdown.

States Emotive
Type: body-emotive
Height: 48px
padding: 11px 16px		 Productive
Type: body-productive
Height: 40px
Padding: 8px 12px		 Inline
Type: body-inline
Height: 32px
Padding: 8px 4px
:enabled Enabled dropdown combobox emotive theme light Enabled dropdown combobox emotive theme dark Enabled dropdown combobox productive theme light Enabled dropdown combobox productive theme dark Enabled dropdown combobox inline theme light Enabled dropdown combobox inline theme dark
:selected Selected dropdown combobox emotive theme light Selected dropdown combobox emotive theme dark Selected dropdown combobox productive theme light Selected dropdown combobox productive theme dark Selected dropdown combobox inline theme light Selected dropdown combobox inline theme dark
Multiselect

Multiselect dropdowns allows the user to select multiple options using checkboxes.

States Emotive
Type: body-emotive
Height: 48px
padding: 11px 16px		 Productive
Type: body-productive
Height: 40px
Padding: 8px 12px		 Inline
Type: body-inline
Height: 32px
Padding: 8px 4px
:enabled Enabled dropdown multiselect emotive theme light Enabled dropdown multiselect emotive theme dark Enabled dropdown multiselect productive theme light Enabled dropdown multiselect productive theme dark Enabled dropdown multiselect inline theme light Enabled dropdown multiselect inline theme dark
:selected Selected dropdown multiselect emotive theme light Selected dropdown multiselect emotive theme dark Selected dropdown multiselect productive theme light Selected dropdown multiselect productive theme dark Selected dropdown multiselect inline theme light Selected dropdown multiselect inline theme dark
Form select

Form selects are displayed in forms and the dropdowns are styled by the browser.

States Emotive Productive Inline
:enabled Enabled dropdown form emotive theme light Enabled dropdown form emotive theme dark Enabled dropdown form productive theme light Enabled dropdown form productive theme dark Enabled dropdown form inline theme light Enabled dropdown form inline theme dark
:selected Selected dropdown form emotive theme light Selected dropdown form emotive theme dark Selected dropdown form productive theme light Selected dropdown form productive theme dark Selected dropdown form inline theme light Selected dropdown form inline theme dark

Usage

Dropdowns present a list of options from which a user can select one option, or several depending on the type of dropdown.

A selected option represents a value, that can be used as an input value or an action to filter/sort content.

Type Use
Dropdown Allows user to select one option.
Combobox Allows user to search options in the dropdown list and select one option.
Multiselect Allows user to select multiple options from a list and filter.