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 GuidelinesAnatomy
Pill Select inherits and extends styles and functionality from the select, menu, and pill components.
Label
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
Please see In-Line Error Validation on Submit.
Behavior
Truncation
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.
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.
Empty
When empty, the pill select looks identical to a regular select. Only when populated is there is a difference.
Specifications
Padding
