Components / inputs

Switch

Turns a setting on or off with immediate effect.

import { Switch } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Switch } from '@basiiik/ui';

<Switch label="Email notifications" />

• Example values were filled in for the required prop label: replace them with your own.
• On or Off is checked or defaultChecked. Hover is CSS; Focused is :focus-visible on the native input; Disabled uses the disabled attribute.
• Storybook: Inputs/Switch.

Props

States. On or Off is checked or defaultChecked. Hover is CSS; Focused is :focus-visible on the native input; Disabled uses the disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Turn a setting on or off immediately

Do not use it when

• Choices applied on form submit (use Checkbox)

Rules for agents

• A Switch applies its change immediately; it never waits for a Save or Submit button
• Every Switch has a visible label that names the setting
• The label describes the setting, not the state; the switch itself shows on or off
• If the change can fail (a network save), revert the Switch and explain what happened
• The mark (checkmark, dot, thumb) reads color.icon.on-brand, not color.text.on-brand: graphics need 3:1, text 4.5:1, so on some brand colours the mark stays white while button text turns dark

Avoid

• Using a Switch inside a form that is applied on submit (use Checkbox)
• A label that changes with the state, such as 'Enabled' / 'Disabled'
• A Switch with no visible label
• Using a Switch to choose between two options that are not on and off (use Radio or Tabs)

Writing the content

• Name the setting as a noun phrase: 'Email notifications', 'Dark mode'
• Avoid 'Turn on' or 'Enable' in the label; the switch already says that
• Use sentence case

Keyboard

• Space toggles
• Enter may also toggle

Accessibility

• aria-checked reflects state
• Visible label required

Colour tokens it reads

Related

• Checkbox

inputs 16 Figma variants Try it in the live demo