logoRuru UI

Switch

The Switch component is used to toggle between two states.

Installation

npx ruru-ui-cli@latest add switch

Usage

Variants

Disabled Switch

Examples

Switch with lables

Default Checked Switch

onCheckedChange function

false

Props

NameTypeDefaultDescription
classNamestring"" Additional class names for the switch.
disabledbooleanfalseFlag to disable the switch.
idstring""Id for the switch.
defaultCheckedbooleanfalseFlag to set the switch to checked by default.
checkedbooleanfalseFlag to set the switch to checked.
onCheckedChange(e: boolean) => voidundefinedCallback function that is called when the switch is toggled.

On this page