Files
shadcn-ui/apps/v4/examples/base/checkbox-group.tsx
shadcn 47c47eaed2 feat: add docs for base-ui components (#9304)
* feat: add base and radix docs

* feat: transform code for display

* fix

* fix

* fix

* fix

* fix

* chore: remove claude files

* fix

* fix

* fix

* chore: run format:write

* fix

* feat: add more examples

* fix

* feat: add aspect-ratio

* feat: add avatar

* feat: add badge

* feat: add breadcrumb

* fix

* feat: add button

* fix

* fix

* fix

* feat: add calendar and card

* feat: add carousel

* fix: chart

* feat: add checkbox

* feat: add collapsible

* feat: add combobox

* feat: add command

* feat: add context menu

* feat: add data-table dialog and drawer

* feat: dropdown-menu

* feat: add date-picker

* feat: add empty

* feat: add field and hover-card

* fix: input

* feat: add input

* feat: add input-group

* feat: add input-otp

* feat: add item

* feat: add kbd and label

* feat: add menubar

* feat: add native-select

* feat: add more components

* feat: more components

* feat: more components

* feat: add skeleton, slider and sonner

* feat: add spinner and switch

* feat: add more components

* fix: tabs

* fix: tabs

* feat: add docs for sidebar

* fix

* fix

* fi

* docs: update

* fix: create page

* fix

* fix

* chore: add changelog

* fix
2026-01-20 19:31:38 +04:00

75 lines
2.1 KiB
TypeScript

import { Checkbox } from "@/examples/base/ui/checkbox"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSet,
} from "@/examples/base/ui/field"
export function CheckboxGroup() {
return (
<FieldSet>
<FieldLegend variant="label">
Show these items on the desktop:
</FieldLegend>
<FieldDescription>
Select the items you want to show on the desktop.
</FieldDescription>
<FieldGroup className="gap-3">
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-hard-disks-ljj-checkbox"
name="finder-pref-9k2-hard-disks-ljj-checkbox"
defaultChecked
/>
<FieldLabel
htmlFor="finder-pref-9k2-hard-disks-ljj-checkbox"
className="font-normal"
>
Hard disks
</FieldLabel>
</Field>
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-external-disks-1yg-checkbox"
name="finder-pref-9k2-external-disks-1yg-checkbox"
defaultChecked
/>
<FieldLabel
htmlFor="finder-pref-9k2-external-disks-1yg-checkbox"
className="font-normal"
>
External disks
</FieldLabel>
</Field>
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-cds-dvds-fzt-checkbox"
name="finder-pref-9k2-cds-dvds-fzt-checkbox"
/>
<FieldLabel
htmlFor="finder-pref-9k2-cds-dvds-fzt-checkbox"
className="font-normal"
>
CDs, DVDs, and iPods
</FieldLabel>
</Field>
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-connected-servers-6l2-checkbox"
name="finder-pref-9k2-connected-servers-6l2-checkbox"
/>
<FieldLabel
htmlFor="finder-pref-9k2-connected-servers-6l2-checkbox"
className="font-normal"
>
Connected servers
</FieldLabel>
</Field>
</FieldGroup>
</FieldSet>
)
}