Docs
Switch
Switch
A control that allows the user to toggle between checked and not checked.
import {
Switch,
SwitchControl,
SwitchLabel,
SwitchThumb,
} from "@repo/tailwindcss/default/switch";
const SwitchDemo = () => {
return (
<Switch class="flex items-center space-x-2">
<SwitchControl>
<SwitchThumb />
</SwitchControl>
<SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
Airplane Mode
</SwitchLabel>
</Switch>
);
};
export default SwitchDemo;import {
Switch,
SwitchControl,
SwitchLabel,
SwitchThumb,
} from "@repo/tailwindcss/solid/switch";
const SwitchDemo = () => {
return (
<Switch class="flex items-center space-x-2">
<SwitchControl>
<SwitchThumb />
</SwitchControl>
<SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
Airplane Mode
</SwitchLabel>
</Switch>
);
};
export default SwitchDemo;Installation
npx shadcn-solid@latest add switchInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { Switch, SwitchControl, SwitchThumb } from "@/components/ui/switch";<Switch>
<SwitchControl>
<SwitchThumb />
</SwitchControl>
</Switch>