Switch
An on/off toggle for settings that apply immediately.
import
import { Switch } from '@joshicodes/cock';Sizes
Behaviour
- A `role="switch"` button, not a checkbox. Use it for things that take effect at once; use a checkbox inside a form that gets submitted.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Switch
| Prop | Type | Default |
|---|---|---|
checked bindable | boolean | false |
disabled | boolean | false |
size | 'sm' | 'md' | 'md' |
description | string | — |
labelPosition Put the label before the switch instead of after it. | 'start' | 'end' | 'end' |
class | string | — |
aria-label Needed when the switch has no visible label. | string | — |
Snippets of Switch
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
Events of Switch
| Event | Type | Default |
|---|---|---|
onchange | (checked: boolean) => void | — |