Switch
An on/off setting that applies at once, with a label slot and a thumb that settles on a spring.
<Switch label="Auto-promote" defaultChecked />Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/switch.jsonThe CLI writes components/ikada/switch.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Switch } from "@sproutboat/ikada";
Usage
import { Switch } from "@/components/ikada/switch";
<Switch label="Auto-promote" defaultChecked />Examples
Focused
<Switch label="Preview deployments" />
<Switch label="Auto-promote" defaultChecked />
<Switch label="Disabled" disabled />
<Switch label="Focused" defaultChecked /><Switch aria-label="Maintenance mode" defaultChecked />Props
| Prop | Type | Description |
|---|---|---|
| className | string | Classes merged onto the root element, after ikada's own. |
| label | ReactNode | Visible label beside the switch. Without it, pass aria-label. |
| style | CSSProperties | ((state: SwitchRootState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Also takes every prop of Omit<ComponentProps<typeof BaseSwitch.Root>, "className" | "children">.
Source: src/components/switch.tsx