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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6273ef343c4d0c6334a01ff4_pillselect_intro.png)
Anatomy
Pill Select inherits and extends styles and functionality from the select, menu, and pill components.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6273ef403d3f520d4f362c93_pillselect_anatomy.png)
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
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/609441e8c36b8f746b310e85_pill_select_behavior.gif)
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6273ef4c220f2bd7f00c05a7_pillselect_truncation.png)
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6273ef745ca745ac299773d2_pillselect_hover.png)
Empty
When empty, the pill select looks identical to a regular select. Only when populated is there is a difference.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/608b3229dd388fb3e6cb73c2_pill_select_empty.png)
Specifications
Padding
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6273ef99bea8ae4021c465e4_pillselect_padding.png)