Toggles
📖 Overview
The Toggles block allows users to add one or more toggles in a flexible layout.
✏️ Content Options
Toggles are managed via a repeater field. Use the “Add Toggle” button to add as many toggles as needed. Each toggle renders the Toggle component.
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
| Variable | Default Value |
|---|---|
--block-toggles-gap |
var(--spacing-xs) |
Toggle Component CSS Variables
Each toggle uses the Toggle component, which has the following CSS variables:
| Variable | Default Value |
|---|---|
--component-toggle-colour |
var(--colour-black) |
--component-toggle-container-background-colour |
var(--colour-neutral-2) |
--component-toggle-container-background-active-colour |
var(--colour-black) |
--component-toggle-container-width |
40px |
--component-toggle-container-height |
24px |
--component-toggle-position-background-colour |
var(--colour-white) |
--component-toggle-position-background-active-colour |
var(--colour-white) |
--component-toggle-position-width |
16px |
--component-toggle-position-height |
16px |
--component-toggle-position-left |
4px |
Toggle checkbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim.
Toggle checkbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim.