Toggle Beta

Open in Storybook Open in Figma

Toggles are fancy versions of radios and checkboxes. They are displayed as a rounded rectangle with a title. Some of them even feature an icon or image. As their title is limited to two lines, there may be additional explanatory text below, i.e. outside the rectangle. The selected radio/checkbox is visualized by colour, and a small check mark in the rectangle on the (top) right.

ToggleIcon

ToggleIcons come with an Icon on top of the title.

Checkboxes

This variant behaves like a checkbox. Each individual Toggle Icon can be turned on and off, setting an (invisible) HTML checkbox to checked or unchecked.

Loading demo…

Rules For Designers

Toggle Icons may be placed on white or grey backgrounds.
The width of the box varies from 140 to 210px, in-between it occupies 80% of its parent container.
The box is 136px in height with a 2px border and 4px border-radius.
The main icon in a box is 48 × 48px.
The checkmark is 16 × 16px.
In regular state, the label is $color-blue-300 (#135ee2), and the border is $color-gray-300 (#a3b5c9).
In selected state, the border colour matches the label, and a checkmark is placed on the (top) right.
There is no background colour in regular state, but it becomes …
- 5% $color-blue-300 (#135ee2) when selected,
- 6% $color-blue-300 (#135ee2) on hover, and
- 8% $color-blue-300 (#135ee2) when a selected item is hovered.
On hover, a box-shadow is shown, which vanishes while pressed.
On focus, the border disappears, but the focus ring is shown.
The checkmark is only visible when the item is checked, i.e. there is no correlation to hover, focus or pressed states.
Disabled toggles adhere to the overall Form theme.

Rules For Developers

Additional text (.g-toggle-description, a <span> with or without .g-small) may be added afterwards in case the label text is not descriptive enough.

Radio Buttons

This variant behaves like radio buttons. Only one of the Toggle Icons can be active at a given time. There is no visual difference to Toggle Icon Checkboxes, but the headline/text of each icon explains that the user can only choose one.

Even the code is similar to checkboxes, as the only difference is type="radio" and the presence of a mutual name attribute.

Loading demo…

ToggleImage

This variant uses arbitrary images and can be used as both checkboxes and radio buttons. They are slightly larger in height than their icon-only counterparts. Any toggle icon can be “upgraded” to toggle image by adding .g-toggle-flexible.

Loading demo…

Rules For Designers

Rules for toggle icons apply, with the following additions.
The display size of images is constrained to 110px in width and 100px in height.
The box is 188px in height.
In disabled state, the image is grayscale with 50% opacity.

ToggleButton

This variant uses neither Icon nor image and can be used as both checkboxes and radio buttons with the modifier .g-toggle-text-only.

Loading demo…

ToggleBadge

This variant functions as an inline list with two options: checkbox and radio, available in two sizes: small and medium.

Loading demo…

ToggleGroup

ToggleGroup functions as a wrapper for other Toggle components, allowing for finer control of the layout.

Loading demo…

ToggleGroup also allows for programmatic control of the state of the Toggle components.

Loading demo…