Pill Select

Pill Selects are used when you need a user to select between one of several options that are shown as pills. Often this will be a status, such as marking an item “closed”, “draft”, etc.
Demo and Developer Guidelines


Pill Select inherits and extends styles and functionality from the select, menu, and pill components.


Labels are title case without punctuation and contain a single noun or noun phrase (labels do not contain verbs). See the Field Label Glossary for common labels and their use cases.

Error State



Pill values will truncate within the input field, but when used within the menu they can wrap to display their full value. This helps account for user-provided statuses or statuses that become longer due to translation.

When a row is wrapping, the blue checkmark will center vertically inside of the row.

Hovering and Selecting Rows

The hover state for pills in a menu are consistent with a standard list menu. Selecting 
a row will trigger a blue checkmark icon.


When empty, the pill select looks identical to a regular select. Only when populated is there is a difference.



Specifications for select, pill and menu components can be found on their 
respective page.