• Checkbox For selections part of a form submission.
Toggles can be aligned via the align prop.
By default, the position of the toggle relative to the label text will be determined by its align prop.
This can be overridden by setting the togglePosition prop to either leading or trailing.
The bleedY prop removes the excess vertical space created by the toggle input — ensuring it’s only as tall as the provided label text.
This better aligns with the layout principles of the system, enabling the surrounding white space to be controlled by the parent layout component, e.g. Stack.
In the following example, a Stack controls the space between child elements. Switching the toggle off introduces unwanted space above and below the label.
Text
Text
Text
You can customise the size of the toggle via the size prop, which accepts either standard or small.