What component has

Note that the Pills component can function as either a group of radio buttons or a group of tabs, depending on the use case. To select the desired behavior, use the behavior property (refer to the example).

Keyboard support

With behavior='auto' (default):

Keyboard support

Key	Function
Tab	When focus moves to the Pills, it moves to the active Pills.Item.
Left Arrow , Right Arrow	Set checked value to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively.

With behavior='manual' :

Keyboard support

Key	Function
Tab	When focus moves to the Pills, the active Pills.Item gets it.
Left Arrow , Right Arrow	Moves focus to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively.
Space/Enter	Change Pills.Item state to active.

See detailed information about the keyboard support for the clickable elements in the Keyboard control guide.

Roles and attributes

Roles and attributes

Role	Attribute	Element	Usage
radiogroup		div	Used for Pills with behavior='auto'. Identifies the div element as a container for a group of radio buttons. Isn’t focusable because focus is managed using a roving tabindex strategy as described below.
radio		div	div
tablist		div	Used for Pills with behavior='manual'. Indicates that the element serves as a container for a set of tabs.
tab		button	Used for Pills with behavior='manual'. Indicates the element serves as a tab control.
	tabIndex="0"	div	Makes the radio button focusable and includes it in the page Tab sequence. Set on only one radio in the radio group. On page load, is set on the first radio button in the radio group. Moves with focus inside the radio group so the most recently focused radio button is included in the page Tab sequence. This approach to managing focus is described in the section on roving tabindex.
	tabindex="-1"	div	Makes the element focusable but not part of the page Tab sequence. Applied to all radio buttons contained in the radio group except for one that is included in the page Tab sequence. This approach to managing focus is described in the section on Roving tabindex.
	aria-checked="true"	div	Identifies radio buttons which is checked. CSS attribute selectors (for example [aria-checked="true"] ) are used to synchronize the visual states with the value of the aria-checked attribute.
	aria-checked="false"	div	Identifies radio buttons which are not checked. CSS attribute selectors (for example [aria-checked="false"] ) are used to synchronize the visual states with the value of the aria-checked attribute.

Considerations for developers

Ensure that behavior prop value is suitable for the use case. If you need to use Pills as a group of radio buttons, set behavior='auto'. If you need to use Pills as a group of tabs, set behavior='manual'.

When using Pills as tabs, ensure the following:

1. Apply the tabpanel role to the content that corresponds to each tab.
2. Add the aria-labelledby attribute to the content that corresponds to each tab.
3. Include the aria-controls attribute for each pill, linking it to the corresponding content.

Refer Using as tabs example.

Roles & attributes

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.

Attributes

Attribute	Element	Usage
aria-labelledby="[IDREF]"	div	Refers to the element that contains the label of the radio group.

Resources

• W3 radio group examples has detailed information about the radio group accessible behavior.
• A11y style guide gives core recommendations for the accessible radio buttons.

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Automated screen reader testing

Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.

Running screen reader against this file.

1. Screen reader goes into the active element.
2. Screen reader says "Like radio button, 1 of 3".
3. Screen reader goes to the next element.
4. Screen reader says "Don't care selected radio button, 2 of 3".
5. Screen reader goes to the next element.
6. Screen reader says "Dislike radio button, 3 of 3".
7. Screen reader triggers element default action.
8. Screen reader says "selected Dislike radio button, 3 of 3".
9. Screen reader goes to the previous element.
10. Screen reader says "Don't care radio button, 2 of 3".