Switch
An on/off control for settings that apply right away. Built on Radix Switch.
npx shadcn add @klarhimmel/switchWhen to use
Use for
A setting that takes effect immediately.
Not for
Choices that wait for a Save button. Use a checkbox.
Pairs with
Settings lists, a visible label.
Preview
switch.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Switch } from '@/components/klarhimmel/ui/switch';
export default function Example() {
return (
<Theme theme="brand">
<label className="flex items-center gap-3">
<Switch defaultChecked /> Email me when something ships
</label>
</Theme>
);
}Install
Import
import { Switch } from '@/components/klarhimmel/ui/switch';- Lands in
- components/klarhimmel/ui/switch.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
- Render in
- Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
checked / defaultChecked | boolean | - | Controlled or uncontrolled state. |
onCheckedChange | (checked: boolean) => void | - | Called when the state changes. |
disabled | boolean | false | Prevents interaction. |
className | string | - | Extra classes, merged after the component's own. |