Switch
The Switch component is used as an alternative for the checkbox component.
Import
import { Switch } from "@recastui/react";
Usage
Editable Example
<Switch label='Switch' />
Disabled
Editable Example
<div className='flex space-x-5 direction-row'><Switch disabled label='Switch'/><Switch disabled defaultChecked label='Switch'/></div>
Color
Use the color props to override the checked background color scheme of the Switch to any color key specified in the Theme. Default color is main.
Editable Example
<div><div className="space-y-2">Stateful colors:</div><div className="grid gap-2 grid-cols-3 lg:grid-cols-5 mb-2"><Switch color='error' defaultChecked label='error'/><Switch color='info' defaultChecked label='info'/><Switch color='success' defaultChecked label='success'/><Switch color='warning' defaultChecked label='warning'/></div><div className="space-y-2">All other colors:</div><div className="grid gap-2 grid-cols-3 lg:grid-cols-5"><Switch color='tomato' defaultChecked label='tomato'/><Switch color='red' defaultChecked label='red'/><Switch color='crimson' defaultChecked label='crimson'/><Switch color='pink' defaultChecked label='pink'/><Switch color='plum' defaultChecked label='plum'/><Switch color='purple' defaultChecked label='purple'/><Switch color='violet' defaultChecked label='violet'/><Switch color='indigo' defaultChecked label='indigo'/><Switch color='blue' defaultChecked label='blue'/><Switch color='cyan' defaultChecked label='cyan'/><Switch color='teal' defaultChecked label='teal'/><Switch color='green' defaultChecked label='green'/><Switch color='grass' defaultChecked label='grass'/><Switch color='orange' defaultChecked label='orange'/><Switch color='brown' defaultChecked label='brown'/><Switch color='sky' defaultChecked label='sky'/><Switch color='mint' defaultChecked label='mint'/><Switch color='yellow' defaultChecked label='yellow'/><Switch color='amber' defaultChecked label='amber'/><Switch color='gold' defaultChecked label='gold'/><Switch color='bronze' defaultChecked label='bronze'/></div></div>
Error
Editable Example
<Switch error label='error' />
Rounded
Use the rounded prop to add rounded corners for the Switch component.
Editable Example
<div className='space-y-2'><Switch labelProps={{fullWidth: true}} rounded='xs' label='Rounded xs'/><Switch labelProps={{fullWidth: true}} rounded='sm' label='Rounded sm'/><Switch labelProps={{fullWidth: true}} rounded='md' label='Rounded md'/><Switch labelProps={{fullWidth: true}} rounded='lg' label='Rounded lg'/><Switch labelProps={{fullWidth: true}} rounded='full' label='Rounded full'/></div>
Size
The Switch component comes with 3 sizes.
Editable Example
<div className='space-y-2'><Switch labelProps={{fullWidth: true}} name='size' size='sm' label='Tea'/><Switch labelProps={{fullWidth: true}} name='size' size='base' label='Tea'/><Switch labelProps={{fullWidth: true}} name='size' size='lg' label='Tea'/></div>