Tile select

Under ReviewUpdated May 12, 2026

Description

A Tile select is a tile with a clear heading and description.
Use a Tile select on its own or in a group. See an example in the Subscription page pattern
In a group, use Tile selects like radio buttons or checkboxes. A user can select 1 Tile select only (like radio buttons), or multiple Tile selects (like checkboxes).
The Tile select uses the Layout component which allows you to build your tile by swapping the instances within it.

Figma library.

Anatomy

Anatomy

States

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs

Component-specific states

Default

Active

Selected

Unavailable

Examples

Product example

Marketing example

Technical example

Tile: select component implemented in Carbon.

Heading

Be as concise as possible, yet clear and specific enough that users should be able to understand the purpose before reading the content.
If the heading gets too long, you can move some details to the subheading.

Requirements

Users should be able to:

Identify each tile as a selectable option related to a specific subject.
Select a tile using assistive technology.
Interact with internal elements, if applicable.
Receive feedback when a tile is selected or deselected.

Interactions

When selected, users should be informed that the tile is in a selected state.

Keyboard interactions

Tab. Moves focus from the previous interactive element on the page to the first interactive element in the tile select.
Enter or Space. Selects or deselects the tile selection button.

Design considerations

A tile select should be used to display information about an option that a user can select.
Each tile should contain clear defined information about a single subject.
The tile select should contain a heading, defining the start of a section of distinct content.
The tile select should contain all relevant information about the thing the user is selecting.
This content should come before the selection button.
The button to select the tile should have clear internal button text, to let users know its purpose.
When the button is pressed and a tile is selected, the button text should be updated to reflect the change.
When a tile is unavailable, the selection button should not be present. Instead, clear static text should explain why the element is not selectable.
Make sure that tile selection states use visual cues other than color to communicate a selected or deselected state.
Make sure that any pills used within the tile have a 4:1 minimum contrast ratio between their text and background.

Development considerations

Tiles themselves are generic elements. They must contain interactive elements for the users to activate.
The whole tile must not be clickable, as this may result in users accidentally selecting items.
The button used to select the tile should have an aria-pressed attribute which toggles between false and true when a tile is selected or deselected.
When the tile is selected, the selection state should be presented to the user in text.
Make sure that any decorative images within the tile have nulled alt text alt=””.

Date	Changes
August 2025	Updated guidance on the accessibility tab.
March 2025	Simplified the structure of the swappable blocks and of the blocks container to allow for a more seamless designing experience.
September 2024	New version created. Previous version archived in the frozen Product design system.