Checkbox

lunar add checkbox

import { Checkbox, CheckboxLabel, CheckboxDescription } from '@/components/ui/checkbox';

const [checked, setChecked] = useState(false);
 
<Checkbox checked={checked} onCheckedChange={setChecked} />

<Checkbox checked={checked} onCheckedChange={setChecked}>
<CheckboxLabel>Accept terms and conditions</CheckboxLabel>
</Checkbox>

<Checkbox checked={checked} onCheckedChange={setChecked}>
<View>
  <CheckboxLabel>Marketing emails</CheckboxLabel>
  <CheckboxDescription>
    Receive emails about new products, features, and more.
  </CheckboxDescription>
</View>
</Checkbox>

<Checkbox size="sm" checked={checked} onCheckedChange={setChecked}>
<CheckboxLabel>Small</CheckboxLabel>
</Checkbox>
 
<Checkbox size="md" checked={checked} onCheckedChange={setChecked}>
<CheckboxLabel>Medium (default)</CheckboxLabel>
</Checkbox>
 
<Checkbox size="lg" checked={checked} onCheckedChange={setChecked}>
<CheckboxLabel>Large</CheckboxLabel>
</Checkbox>

const [items, setItems] = useState([
{ id: 1, checked: true },
{ id: 2, checked: false },
{ id: 3, checked: true },
]);
 
const allChecked = items.every(item => item.checked);
const someChecked = items.some(item => item.checked);
 
<Checkbox
checked={allChecked}
indeterminate={someChecked && !allChecked}
onCheckedChange={(checked) => {
  setItems(items.map(item => ({ ...item, checked })));
}}
>
<CheckboxLabel>Select All</CheckboxLabel>
</Checkbox>

<Checkbox disabled checked={false}>
<CheckboxLabel>Disabled unchecked</CheckboxLabel>
</Checkbox>
 
<Checkbox disabled checked={true}>
<CheckboxLabel>Disabled checked</CheckboxLabel>
</Checkbox>