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 GuidelinesFigma Component

Anatomy

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

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.

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

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