mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
fd72ad7430
* docs: add API Reference sections to all component documentation - Add comprehensive API Reference sections to 36 component docs - Document custom props, variants, and behaviors for each component - Distinguish between Base UI aliases and custom components - Include prop tables with Type, Default, and Description columns - Follow alert-dialog.mdx as the reference standard for quality Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: add essential inline examples and 'Also exported as' notes - Add inline code example for Menu's inset prop showing alignment pattern - Add 'Also exported as ToggleGroupItem' note to Toggle component - Add ToggleGroupSeparator to toggle-group documentation - Add 'Also exported as RadioGroupItem' note to Radio component Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix section ordering - API Reference before Examples Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: remove references to non-exported components Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix inaccurate API documentation per Cubic AI review Co-Authored-By: pasquale@cal.com <pasquale@cal.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: pasquale@cal.com <pasquale@cal.com>
101 lines
1.8 KiB
Plaintext
101 lines
1.8 KiB
Plaintext
---
|
|
title: Checkbox Group
|
|
description: Provides shared state to a series of checkboxes.
|
|
|
|
links:
|
|
doc: https://base-ui.com/react/components/checkbox-group#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="p-checkbox-group-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/checkbox-group
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource
|
|
name="checkbox-group"
|
|
title="components/ui/checkbox-group.tsx"
|
|
/>
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { CheckboxGroup } from "@/components/ui/checkbox-group"
|
|
```
|
|
|
|
```tsx
|
|
<CheckboxGroup>
|
|
<Label>
|
|
<Checkbox defaultChecked />
|
|
Next.js
|
|
</Label>
|
|
<Label>
|
|
<Checkbox />
|
|
Vite
|
|
</Label>
|
|
<Label>
|
|
<Checkbox />
|
|
Astro
|
|
</Label>
|
|
</CheckboxGroup>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### CheckboxGroup
|
|
|
|
Styled wrapper for `CheckboxGroup` from Base UI. Provides shared state management for a group of checkboxes with flex column layout.
|
|
|
|
## Examples
|
|
|
|
For accessible group labelling and validation, prefer wrapping checkbox groups with `Field` and `Fieldset`. See the related example: [Checkbox group field](/ui/docs/components/field#checkbox-group-field).
|
|
|
|
### With Disabled Item
|
|
|
|
<ComponentPreview name="p-checkbox-group-2" />
|
|
|
|
### Parent Checkbox
|
|
|
|
<ComponentPreview name="p-checkbox-group-3" />
|
|
|
|
### Nested Parent Checkbox
|
|
|
|
<ComponentPreview name="p-checkbox-group-4" />
|
|
|
|
### Form Integration
|
|
|
|
<ComponentPreview name="p-checkbox-group-5" />
|