Checkbox
Checkbox component is used in forms when a user needs to select multiple values from several options.
Import
import { Checkbox } from "@recastui/react";
Usage
Editable Example
<Checkbox label='Checkbox' />
Disabled
Editable Example
<div className='flex space-x-5 direction-row'><Checkbox disabled label='Checkbox'/><Checkbox disabled defaultChecked label='Checkbox'/></div>
Color
Use the color props to override the color scheme of the Checkbox 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"><Checkbox color='error' label='error'/><Checkbox color='info' label='info'/><Checkbox color='success' label='success'/><Checkbox color='warning' label='warning'/></div><div className="space-y-2">All other colors:</div><div className="grid gap-2 grid-cols-3 lg:grid-cols-5"><Checkbox color='tomato' label='tomato'/><Checkbox color='red' label='red'/><Checkbox color='crimson' label='crimson'/><Checkbox color='pink' label='pink'/><Checkbox color='plum' label='plum'/><Checkbox color='purple' label='purple'/><Checkbox color='violet' label='violet'/><Checkbox color='indigo' label='indigo'/><Checkbox color='blue' label='blue'/><Checkbox color='cyan' label='cyan'/><Checkbox color='teal' label='teal'/><Checkbox color='green' label='green'/><Checkbox color='grass' label='grass'/><Checkbox color='orange' label='orange'/><Checkbox color='brown' label='brown'/><Checkbox color='sky' label='sky'/><Checkbox color='mint' label='mint'/><Checkbox color='yellow' label='yellow'/><Checkbox color='amber' label='amber'/><Checkbox color='gold' label='gold'/><Checkbox color='bronze' label='bronze'/></div></div>
Error
Editable Example
<Checkbox error label='error' />
Size
The Checkbox component comes with 3 sizes.
Editable Example
<div className='space-y-2'><Checkbox labelProps={{fullWidth: true}} name='size' size='sm' label='Tea'/><Checkbox labelProps={{fullWidth: true}} name='size' size='base' label='Tea'/><Checkbox labelProps={{fullWidth: true}} name='size' size='lg' label='Tea'/></div>