Switch

Use a switch for a binary setting that takes effect as soon as it changes. The label should describe the setting, so the on and off states are clear without extra explanation.

Automatic reminders

Compact setting

Automatic reminders are on.

Show codeCopy

Import

import { Switch } from "@workshop1/ui/components/switch"

Sizes

Use the default size for normal settings and size="sm" where the surrounding control is compact. Keep the larger hit area provided by the component.

Accessibility

Give every switch an accessible name with a visible Label connected by htmlFor. If changing the setting triggers work, communicate completion or failure near the control.

Best practices

• Use a checkbox when a choice is submitted with a form instead of applied immediately.
• Keep the setting state visible in the label or nearby status text.
• Avoid switching context or navigating away when the control changes.