BRAID
Braid Logo
 

Toggle

Open in Playroom

Alignment

Toggles can be aligned via the align prop.
Open in Playroom

Toggle position

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.
Open in Playroom

Sizes

You can customise the size of the toggle via the size prop, which accepts either standard or small.
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Toggle
  data={{ testid: 'toggle-1' }}
  // => data-testid="toggle-1"
/>
Open in Playroom

Alternatives

  • Checkbox — For selections part of a form submission.