checkbox-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-example",
  "title": "Checkbox",
  "registryDependencies": [
    "checkbox",
    "field",
    "table",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/checkbox-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-nova/ui/table\"\n\nexport default function CheckboxExample() {\n  return (\n    <ExampleWrapper>\n      <CheckboxBasic />\n      <CheckboxWithDescription />\n      <CheckboxInvalid />\n      <CheckboxDisabled />\n      <CheckboxWithTitle />\n      <CheckboxInTable />\n      <CheckboxGroup />\n    </ExampleWrapper>\n  )\n}\n\nfunction CheckboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms\" />\n        <FieldLabel htmlFor=\"terms\">Accept terms and conditions</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <FieldContent>\n          <FieldLabel htmlFor=\"terms-2\">Accept terms and conditions</FieldLabel>\n          <FieldDescription>\n            By clicking this checkbox, you agree to the terms and conditions.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Field orientation=\"horizontal\" data-invalid>\n        <Checkbox id=\"terms-3\" aria-invalid />\n        <FieldLabel htmlFor=\"terms-3\">Accept terms and conditions</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"toggle\" disabled />\n        <FieldLabel htmlFor=\"toggle\">Enable notifications</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxWithTitle() {\n  return (\n    <Example title=\"With Title\">\n      <FieldGroup>\n        <FieldLabel htmlFor=\"toggle-2\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"toggle-2\" defaultChecked />\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"toggle-4\">\n          <Field orientation=\"horizontal\" data-disabled>\n            <Checkbox id=\"toggle-4\" disabled />\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nconst tableData = [\n  {\n    id: \"1\",\n    name: \"Sarah Chen\",\n    email: \"sarah.chen@example.com\",\n    role: \"Admin\",\n  },\n  {\n    id: \"2\",\n    name: \"Marcus Rodriguez\",\n    email: \"marcus.rodriguez@example.com\",\n    role: \"User\",\n  },\n  {\n    id: \"3\",\n    name: \"Priya Patel\",\n    email: \"priya.patel@example.com\",\n    role: \"User\",\n  },\n  {\n    id: \"4\",\n    name: \"David Kim\",\n    email: \"david.kim@example.com\",\n    role: \"Editor\",\n  },\n]\n\nfunction CheckboxInTable() {\n  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(\n    new Set([\"1\"])\n  )\n\n  const selectAll = selectedRows.size === tableData.length\n\n  const handleSelectAll = (checked: boolean) => {\n    if (checked) {\n      setSelectedRows(new Set(tableData.map((row) => row.id)))\n    } else {\n      setSelectedRows(new Set())\n    }\n  }\n\n  const handleSelectRow = (id: string, checked: boolean) => {\n    const newSelected = new Set(selectedRows)\n    if (checked) {\n      newSelected.add(id)\n    } else {\n      newSelected.delete(id)\n    }\n    setSelectedRows(newSelected)\n  }\n\n  return (\n    <Example title=\"In Table\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-8\">\n              <Checkbox\n                id=\"select-all\"\n                checked={selectAll}\n                onCheckedChange={handleSelectAll}\n              />\n            </TableHead>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tableData.map((row) => (\n            <TableRow\n              key={row.id}\n              data-state={selectedRows.has(row.id) ? \"selected\" : undefined}\n            >\n              <TableCell>\n                <Checkbox\n                  id={`row-${row.id}`}\n                  checked={selectedRows.has(row.id)}\n                  onCheckedChange={(checked) =>\n                    handleSelectRow(row.id, checked === true)\n                  }\n                />\n              </TableCell>\n              <TableCell className=\"font-medium\">{row.name}</TableCell>\n              <TableCell>{row.email}</TableCell>\n              <TableCell>{row.role}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction CheckboxGroup() {\n  return (\n    <Example title=\"Group\">\n      <Field>\n        <FieldLabel>Show these items on the desktop:</FieldLabel>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-hard-disks-ljj\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-hard-disks-ljj\"\n            className=\"font-normal\"\n          >\n            Hard disks\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-external-disks-1yg\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-external-disks-1yg\"\n            className=\"font-normal\"\n          >\n            External disks\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-cds-dvds-fzt\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-cds-dvds-fzt\"\n            className=\"font-normal\"\n          >\n            CDs, DVDs, and iPods\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-connected-servers-6l2\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-connected-servers-6l2\"\n            className=\"font-normal\"\n          >\n            Connected servers\n          </FieldLabel>\n        </Field>\n      </Field>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}