# Switch

An on/off setting that applies at once, with a label slot and a thumb that settles on a spring.

Source page: https://sproutboat.com/ikada/components/switch

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/switch.json
```
Or from the package: `import { Switch } from "@sproutboat/ikada";`
## Usage
```tsx
import { Switch } from "@/components/ikada/switch";

<Switch label="Auto-promote" defaultChecked />
```
## Examples
### States
Press and hold: the thumb squishes toward its travel, then rides the snappy spring.
```tsx
<Switch label="Preview deployments" />
<Switch label="Auto-promote" defaultChecked />
<Switch label="Disabled" disabled />
<Switch label="Focused" defaultChecked />
```
### Without a label
Without a visible label, pass aria-label.
```tsx
<Switch aria-label="Maintenance mode" defaultChecked />
```
## Props
### SwitchProps
Also takes every prop of `Omit<ComponentProps<typeof BaseSwitch.Root>, "className" | "children">`.
| 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. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/switch.tsx