Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Powered by Mintlify
Auto-generate your docs
A group container for managing multiple related checkboxes, built on @base-ui/react.
import { CheckboxGroup } from "@craftdotui/baseui/components/checkbox-group";
import { Checkbox, CheckboxIndicator } from "@craftdotui/baseui/components/checkbox";
<CheckboxGroup>
<div className="flex items-center gap-2">
<Checkbox value="option1">
<CheckboxIndicator />
</Checkbox>
<label>Option 1</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="option2">
<CheckboxIndicator />
</Checkbox>
<label>Option 2</label>
</div>
</CheckboxGroup>
<CheckboxGroup>
<div className="flex items-center gap-2">
<Checkbox value="react">
<CheckboxIndicator />
</Checkbox>
<label>React</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="vue">
<CheckboxIndicator />
</Checkbox>
<label>Vue</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="angular">
<CheckboxIndicator />
</Checkbox>
<label>Angular</label>
</div>
</CheckboxGroup>
const [selected, setSelected] = useState(['react', 'vue']);
<CheckboxGroup value={selected} onValueChange={setSelected}>
<div className="flex items-center gap-2">
<Checkbox value="react">
<CheckboxIndicator />
</Checkbox>
<label>React</label>
</div>
<div className="flex items-center gap-2">
<Checkbox value="vue">
<CheckboxIndicator />
</Checkbox>
<label>Vue</label>
</div>
</CheckboxGroup>
<CheckboxGroup defaultValue={['option1']}>
{/* Checkboxes */}
</CheckboxGroup>