Checkbox

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/radix-sera/components/example"
9import { Checkbox } from "@/registry/radix-sera/ui/checkbox"
10import {
11  Field,
12  FieldContent,
13  FieldDescription,
14  FieldGroup,
15  FieldLabel,
16  FieldTitle,
17} from "@/registry/radix-sera/ui/field"
18import {
19  Table,
20  TableBody,
21  TableCell,
22  TableHead,
23  TableHeader,
24  TableRow,
25} from "@/registry/radix-sera/ui/table"
26 
27export default function CheckboxExample() {
28  return (
29    <ExampleWrapper>
30      <CheckboxBasic />
31      <CheckboxWithDescription />
32      <CheckboxInvalid />
33      <CheckboxDisabled />
34      <CheckboxWithTitle />
35      <CheckboxInTable />
36      <CheckboxGroup />
37    </ExampleWrapper>
38  )
39}
40 
41function CheckboxBasic() {
42  return (
43    <Example title="Basic">
44      <Field orientation="horizontal">
45        <Checkbox id="terms" />
46        <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
47      </Field>
48    </Example>
49  )
50}
51 
52function CheckboxWithDescription() {
53  return (
54    <Example title="With Description">
55      <Field orientation="horizontal">
56        <Checkbox id="terms-2" defaultChecked />
57        <FieldContent>
58          <FieldLabel htmlFor="terms-2">Accept terms and conditions</FieldLabel>
59          <FieldDescription>
60            By clicking this checkbox, you agree to the terms and conditions.
61          </FieldDescription>
62        </FieldContent>
63      </Field>
64    </Example>
65  )
66}
67 
68function CheckboxInvalid() {
69  return (
70    <Example title="Invalid">
71      <Field orientation="horizontal" data-invalid>
72        <Checkbox id="terms-3" aria-invalid />
73        <FieldLabel htmlFor="terms-3">Accept terms and conditions</FieldLabel>
74      </Field>
75    </Example>
76  )
77}
78 
79function CheckboxDisabled() {
80  return (
81    <Example title="Disabled">
82      <Field orientation="horizontal">
83        <Checkbox id="toggle" disabled />
84        <FieldLabel htmlFor="toggle">Enable notifications</FieldLabel>
85      </Field>
86    </Example>
87  )
88}
89 
90function CheckboxWithTitle() {
91  return (
92    <Example title="With Title">
93      <FieldGroup>
94        <FieldLabel htmlFor="toggle-2">
95          <Field orientation="horizontal">
96            <Checkbox id="toggle-2" defaultChecked />
97            <FieldContent>
98              <FieldTitle>Enable notifications</FieldTitle>
99              <FieldDescription>
100                You can enable or disable notifications at any time.
101              </FieldDescription>
102// … truncated