Dropdown

Inputs come in two different colors. The default input color is $field-01 and is used on $ui-background and $ui-02 page backgrounds. The --light version input color is $field-02 and is used on $ui-01 page backgrounds.

Active: Placeholder text should remain when the user clicks into the text input and gets a cursor. Once the user starts typing, the hint text is replaced with the user input text.

Help text: Help text appears below the label when the input is active. Help text remains visible while the input is focused and disappears after focus away.

Error: Error messages appear below the input field and are always present while invalid.

Disabled: Disabled state should has a .not-allowed cursor on hover.

All dropdown text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Dropdown options should not exceed three words.

Dropdowns have two states, open and closed. An open and closed dropdown should be the same width and appropriately fit the design, layout, and content. The height of a closed dropdown stays consistent while the height of an open dropdown will vary based on the amount of options it has. Please note the various color differences for closed and open dropdowns.

Inline select has two different states; one for mouse hover and one for keyboard focus.

Filtering can be used with dropdown and multi-select dropdown but not inline dropdown.