edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Switch

Toggle switch with accessible on/off states.

Componentsdocsbase-ui/switch

Installation

npx shadcn@latest add https://ui.edbn.me/r/switch.json

Manual

API Reference

Root

Groups all parts of the switch. Renders a button element.

defaultCheckedboolean
=false

Initial checked state

checkedboolean

Controlled checked state

onCheckedChangefunction

Called when state changes

disabledboolean
=false

Disable switch

readOnlyboolean
=false

Read-only state

requiredboolean
=false

Required field

nativeButtonboolean
=true

Render as native button

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-checkedPresent when switch is on
data-uncheckedPresent when switch is off
data-disabledPresent when switch is disabled
data-readonlyPresent when switch is read-only
data-requiredPresent when switch is required
data-validPresent in valid state
data-invalidPresent in invalid state
data-dirtyPresent when value has changed
data-touchedPresent when switch has been interacted with

Thumb

The thumb that visually toggles. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Thumb data attributes
AttributeDescription
data-checkedPresent when switch is on
data-uncheckedPresent when switch is off