Selection Tags
Design System - Selection Tags component
Selection Tags are compact, button-like elements that allow users to make single or multiple selections from a set of options. They offer a clean and intuitive interaction pattern, ensuring a smooth and responsive user experience across form elements, filters, and grouped choices.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>Anatomy
Variants
Single Select
Allows the user to choose only one option from the group. Once a selection is made, the previously selected option is deselected automatically. This variant is ideal for use cases like survey forms or filter selections.
Multi Select
Enables users to select multiple options simultaneously. Commonly used where more than one input or category applies, such as skill filters, tag selectors, or custom checklists.
Interaction States
Active State
When a tag is selected, the background colour changes to primary. This state clearly communicates which options are currently selected.
Dismiss on Mouse Out
Tooltips disappear when the user moves away or loses focus, maintaining a clean and distraction-free interface.
Properties
Error
It displays a red border around the tag container and shows a supporting error message below. This is also used for validation states to indicate missing or incorrect selection(s).
Prefix Icon
An icon placed to the left of the label text that helps convey additional context or function visually (e.g., an edit or status indicator).
Suffix Icon
An icon placed to the right of the label text that is typically used for actions like removal, more options, or tagging.
Container Disabled
Disables interaction with the entire selection group, and tags appear visually muted and do not respond to hover or click states. This is useful in forms where selection is conditionally locked.
Property Configuration Table
Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.
width
text
errorMessage
text
options
yes/no
no
onSelectionChanged
yes/no
no
allowMultipleSelection
number
selected
yes/no
withContainer
yes/no
no
Behaviours
Use for exclusive choices
Use selection tags when you need users to make clear, mutually exclusive choices or multiple selections. This ensures optimal visual hierarchy and helps users quickly understand their available options while maintaining a clean and organised interface layout.
Don't overcrowd the selection tag group with more than 4 options. Overwhelming users with too many choices makes it difficult for users to scan and compare options effectively.
Usage Guide
Use for compact information display
Keep tooltips concise and clear, limiting the text to one or two short sentences for quick readability.
Avoid adding actions or links in tooltips, as they should only provide passive information and appear on hover or keyboard focus.
Changelog
Dec 15, 2024
v-0.0.2
This component is added to the website. This component is now individually versioned.
Design Checklist
All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.
Last updated
Was this helpful?