Skip to main content

What are you looking for?

Try searching for…

Components

ToggleGroup

ToggleGroup groups related options. The component consists of a group of buttons that are connected, where only one button can be selected at a time.

What you need to check

Each button in ToggleGroup must have a accessible name.

If a button only shows an icon, the name must describe what the option means.
Example: “List view” or “Grid view”.

WCAG: 4.1.2 Name, role, value


ToggleGroup must be used in a way that keeps all options visible and usable on small screens.

ToggleGroup does not wrap onto multiple lines. Too many options or long labels may cause parts of the component to extend outside the visible viewport.

Check that all options remain visible and usable at a narrow viewport or high zoom without horizontal scrolling.

WCAG: 1.4.10 Dynamisk tilpasning (Reflow)

Edit this page on github.com (opens in a new tab)