Switch

A control that toggles between checked and unchecked states.

Base

<Switch />
<Switch defaultChecked />

Disabled

<Switch disabled />
<Switch defaultChecked disabled />

Sizes

<Switch size="sm" defaultChecked />
<Switch size="md" defaultChecked />

Slim Variant

<Switch variant="slim" size="sm" defaultChecked />
<Switch variant="slim" size="md" defaultChecked />

Form Integration

<SwitchForm
  control={form.control}
  name="newsletter"
  label="Receive newsletter"
  description="Stay updated with the latest news."
  isRequired
/>

API Reference

Switch

Props	Type	Default	Description
variant?	"default" \| "slim"	"default"	Visual style of the switch.
size?	"sm" \| "md"	"sm"	Size of the switch.
checked?	boolean	-	The controlled state of the switch. Must be used in conjunction with onCheckedChange.
onCheckedChange?	funtion[ (checked: boolean) => void]	-	Event handler called when the state of the switch changes.
defaultChecked?	boolean	false	Initial unchecked/checked state.
disabled?	boolean	false	Disable interaction.
className?	string	-	Additional styles for Switch.

SwitchForm

The following props plus reac-hook-form props (name, control...) and all Switch props execpt defaultChecked, checked and onCheckedChange

Props	Type	Default	Description
label?	string	-	Form label
labelTooltip?	string	-	Form label tooltip
description?	string	-	Form description
isRequired?	boolean	false	To indicate requirement to users.
wrapperClassName?	string	-	Additional styles for Switch, label and description wrapper.