Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { Switch } from '@bigbang/ui';- Source
- Switch.tsx
- Storybook
- Switch · Playground
Switch is in the @bigbang/ui package.
import { Switch } from '@bigbang/ui';
<Switch label="Option label" checked={checked} loading={saving} onCheckedChange={save} />;labelRequired- Description
- The visible text next to the track; it names the switch and clicking it toggles it.
- Type
ReactNode
description- Description
- Help text under the label, linked with
aria-describedby. - Type
ReactNode
checked- Description
- On state when you control it. Use it with
onCheckedChange. - Type
boolean
defaultChecked- Description
- On state on first render when you do not control it.
- Type
boolean- Default
false
onCheckedChange- Description
- Called with the new state when the user toggles the switch. Apply the setting at once.
- Type
(checked: boolean) => void
loading- Description
- Shows a spinner in the thumb and ignores toggles while the change is saved. The switch stays focusable and reports
aria-busy. - Type
boolean- Default
false
loadingLabel- Description
- Text announced once when
loadingstarts. Without it, the library stringui.spinner.loadingis announced ("Yükleniyor" or "Loading"). - Type
string
disabled- Description
- Turns off interaction and fades the switch and its label.
- Type
boolean- Default
false
size- Description
- Track size: 32 × 18 px, or 24 × 14 px for dense rows such as table cells.
- Type
'sm' | 'md'- Default
'md'
name- Description
- Field name used when the form is submitted.
- Type
string
className- Description
- For layout only: margins and placement.
- Type
string
Data attributes
Section titled “Data attributes”data-component="switch": on the root element.data-part:track,thumb,label,description.data-loading: on the track while saving.data-checked,data-unchecked,data-disabled: on the track and thumb, from Base UI.