Toggle

Use a toggle when a single setting can be turned on or off and the effect is clear from the label, such as including completed work orders in a queue.

Show completed

Only active work orders are shown.

Show codeCopy

Variants and sizes

Use the default variant for a quiet toolbar control and outline when the toggle needs a visible boundary. Choose sm, default, or lg to match the surrounding density; do not add custom height, padding, radius, or colour classes.

The pressed state is exposed through aria-pressed by the primitive. Use controlled state when the setting changes nearby content or needs to be persisted.

Accessibility

Give the toggle a visible text label whenever space allows. Icon-only toggles need an explicit aria-label. Use aria-describedby for supporting text, keep the focus ring visible, and make the state change understandable without relying on colour alone.

Best practices

• Use a toggle for a setting that takes effect immediately.
• Use a checkbox when the value belongs to a form submission.
• Keep the label stable while aria-pressed communicates the changing state.