Switch

Toggle a setting or feature that takes effect immediately.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Switch for a two-state setting that takes effect immediately. Use Checkbox for multiple form selections, or Radio or Segmented for a mutually exclusive parameter.

Use bind:checked to keep the switch state in sync. value is only the internal input value and does not determine whether the switch is on.
The current name and form attributes are not forwarded to the internal input. If native form submission is required, synchronize a field in the form layer. Provide a readable label.

Import

import { Switch } from '@snowui-design-system/components';

Usage

Selection

Sizes

Disabled

Colors

API Reference

Property	Type	Default	Example	Description
`checked`	`boolean`	`false`	`bind:checked={subscribed}`	Switch state; supports bind:checked. Clicking the label or pressing Space while focused toggles it. The bound variable, visible track, and native input stay in sync. Disabled user input cannot change it.
`value`	`any`	`—`	`value="Components"`	Value passed to the internal native checkbox. It does not determine switch state or create a selection group. Other attributes such as name and form currently go to the outer label, so value alone does not create a named form entry.
`size`	`ResourceSize \| number`	`—`	`size={24}`	Nominal visible track height in pixels at a 16px root font size, with outer spacing counted separately. Accepts 12, 16, 20, 24, 28, 32, 40, 48, 80, or another finite positive number. Without an explicit value, reads iconSize then size from parent size context, then falls back to 16. Invalid numbers use the default size token. Explicit values take priority and scale with the root font size.
`disabled`	`boolean`	`false`	`disabled`	Disable the native input and user toggling while preserving the current state and label. Removes it from the Tab order. External updates to checked still apply.
`children`	`Snippet`	`—`	`<Switch>Components</Switch>`	Label content displayed after the track. Omit it to show no visible label. The label text gives the internal switch an accessible name and can contain composed text snippets.
`singleLine`	`boolean`	`true`	`singleLine`	Labels and controls use one line by default, with stable attachments. A constrained label may show an ellipsis while retaining its complete accessible name and original children. Set false for complex multiline content. Compose Text lines={1} for a full-text tooltip.
`gap`	`number`	`—`	`gap={42}`	Inherited Frame gap token index. Omit it for the original component gap; explicit values override the preferred gap. Effective spacing stays at least 4 CSS px, including zero and root-font or gap-scale reductions. Larger preferred gaps are preserved.
`enableResponsive`	`boolean`	`false`	`enableResponsive`	Pass through to the root Frame to enable its container adaptation observer. Does not change the standard Switch size range. See Frame capability switches.
`enableContext`	`boolean`	`false`	`enableContext`	Pass through to the root Frame to control the context it provides to children for state, loading, and motion. Does not control how Switch reads parent size context. See Frame capability switches.