# Pills
# Description
Pills are a quick action element typically arranged in a scrollable horizontal carousel with unlimited options. They allow users to easily make selections, filter products, or trigger actions. Pills consist of a text, a container and may contain an optional thumbnail. We use two types of pills; choice pills and filter pills.
# Must include
- Label (centre aligned)
- Container - where label for the pill is housed.
# Optional
Fill icon - to aid visual comprehension of colour label.
# Choice pills
Clicking or tapping on a pill confirms the choice for the user.
- They clearly show options in a compact area.
- They are typically displayed horizontally and sequentially.
# Filter pills
Clicking or tapping on a pill in a filter sheet will apply a filter to the products on that page.
- They use tags or descriptive words to filter content.
- They are arranged by category e.g. colour or size.
- They are arranged horizontally on mobile devices and wrap in rows on desktop.
# Rules
- Don't use choice pills to present only a single option.
- Indicate pill selection to the user through a change in style.
- For pills that denote colour, use a thumbnail colour swatch to highlight the colour.
# Accessibility
- Pills should be a minimum height of 56px.
- Users can move through the pills using the arrow keys and select/deselect them using the keyboard.
- Pills have a focus state to highlight which pill is currently highlighted in the sequence.
- A pill group should have a title to inform users about what the pills are.
- Pills should have a meaningful and appropriate ARIA label to inform the user about what action selecting the pill will have.
- Pills should have an ARIA label to define whether a pill is selected or not.