Toggle

Basic

With Label

• Label can be added via children of Toggle component.

Sizes

• Toggle supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Disabled

• Disabled state can be enabled by setting disabled prop to true.

ReadOnly

• ReadOnly state can be enabled by setting readOnly prop to true.

Label alignment

• Label can be placed to the right or left of the toggle by setting labelAlignment prop to left | right.
• Default labelAlignment is right.

Toggle Group

• FormCheck is a helpful wrapper used to group toggle components that provides an easier API.

Accessibility

Toggle is a regular input[type="checkbox"] follow WAI-ARIA recommendations.

Roles, States, and Properties

• Toggle has role="switch".
• Toggle has an accessible label provided by a visible label referenced by the value of aria-labelledby set on the element with role switch.
• Toggle uses the HTML checked attribute to indicate its state:
• checked="true" indicates the toggle is on.
• checked="false" indicates the toggle is off.
• If a set of toggles is presented as a logical group with a visible label, either:
• The toggles are included in an element with role group.
• The group element has the property aria-labelledby set to the ID of the element containing the group label.
• The group element has the property aria-describedby set to the ID of the element containing the group description.

Keyboard interactions

Key	Function	Condition
Tab	Moves keyboard focus to the toggle.
Space	Changes the state of the toggle between on and off.	When the toggle has focus.