Switch
A switch component with label support. The label can be placed at the Start, End, Top, or Bottom position with full RTL support.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { Switch, Divider } from 'sdaia-ui';5
Installation
npx sdaia-ui@latest add switch
Usage
import { Switch } from "@/components/ui/switch"<Switch placement="start" />Examples
Off
The default unchecked state.
Loading preview…
1
<SwitchLabel2
label="Switch Label"3
helperText="When a selection needs a further detailed explanation, it goes here."4
on={false}5
/>On
Use `on={true}` or `defaultChecked` to set the switch to the on state.
Loading preview…
1
<SwitchLabel2
label="Switch Label"3
helperText="When a selection needs a further detailed explanation, it goes here."4
on={true}5
/>Disabled
Use `state="Disabled" to show the disabled state.
Loading preview…
1
<>2
<SwitchLabel3
label="Switch Label"4
helperText="When a selection needs a further detailed explanation, it goes here."5
on={false}API Reference
Switch Props
Props for the Switch component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | — | optional |
placement | "start" | "end" | "top" | "bottom" | "start" | optional |
on | boolean | — | optional |
defaultChecked | boolean | — | optional |
size | "md" | "lg" | "md" | optional |
error | string | — | optional |
helperText | string | — | optional |
disabled | boolean | false | optional |
onChange | ChangeEventHandler<HTMLInputElement> | — | optional |