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.
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.
- 5%
- 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.
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.
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.
ToggleBadge
This variant behaves as an inline list of checkboxes and comes in 2 different sizes (small and medium).
ToggleGroup
ToggleGroup functions as a wrapper for other Toggle components, allowing for finer control of the layout.
ToggleGroup also allows for programmatic control of the state of the Toggle components.