{"name":"checkbox","title":"Checkbox","description":"A control that allows the user to toggle between checked, unchecked, and indeterminate states.","installCommand":"bunx marko-ui add checkbox -y","usageTags":"<Checkbox>","importSnippet":"import Checkbox from \"@/components/ui/checkbox/checkbox.marko\";","usageSnippet":"<let/accepted=(false as boolean | \"indeterminate\")/>\n\n<Checkbox checked:=accepted>\n  <span>Accept terms and conditions</span>\n</Checkbox>","tags":["Checkbox"],"parts":[],"props":[{"name":"checked","type":"CheckedState | undefined","required":false,"description":"The controlled checked state of the checkbox"},{"name":"defaultChecked","type":"CheckedState | undefined","required":false,"description":"The initial checked state of the checkbox when rendered.\nUse when you don't need to control the checked state of the checkbox."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the checkbox is disabled"},{"name":"form","type":"string | undefined","required":false,"description":"The id of the form that the checkbox belongs to."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the checkbox. Useful for composition."},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the checkbox is invalid"},{"name":"name","type":"string | undefined","required":false,"description":"The name of the input field in a checkbox.\nUseful for form submission."},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the checkbox is read-only"},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the checkbox is required"},{"name":"value","type":"string | undefined","required":false,"default":"on","description":"The value of checkbox input. Useful for form submission."}],"events":[{"name":"checkedChange","arg":"boolean | 'indeterminate'"},{"name":"onCheckedChange","arg":"CheckedChangeDetails","description":"The callback invoked when the checked state changes."}],"keyboard":[{"keys":"Space","description":"Toggles the checkbox between checked and unchecked."},{"keys":"Tab","description":"Moves focus to the next focusable element; skips the checkbox entirely when `disabled`."}],"accessibilityNotes":["Renders a native hidden `<input type=\"checkbox\">` under a styled root `<label>`, so it participates in native form submission and inherits the platform's checkbox semantics.","Always pair the checkbox with visible label text: either as the checkbox's own `content` body (its root element is already a `<label>`), or an external `FieldLabel`/`Label` with `for` matching the checkbox's `id` — never wrap a `Checkbox` in a second `<label>`, since that nests two label elements around the same control.","Set `aria-invalid=\"true\"` on the checkbox (and `invalid` on a wrapping `Field`) when validation fails — screen readers announce the invalid state.","Set `disabled` to remove the control from the tab order and block pointer input.","The indeterminate state (`checked=\"indeterminate\"`) is a purely visual/ARIA cue for partial selection (e.g. \"select all\" with a mixed subset checked); it is not a persisted value — the underlying control is still binary \"checked\" or \"unchecked\" once toggled."],"examples":[{"id":"checkbox-basic","title":"Basic (label content)","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\n\n<Checkbox>\n  <span>Accept terms and conditions</span>\n</Checkbox>","description":"A checkbox paired with a label as its content."},{"id":"checkbox-demo","title":"Basic","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\n\n<FieldGroup class=\"max-w-sm\">\n  <Field orientation=\"horizontal\">\n    <Checkbox id=\"checkbox-demo-terms\">Accept terms and conditions</Checkbox>\n  </Field>\n  <Field orientation=\"horizontal\">\n    <Checkbox id=\"checkbox-demo-terms-2\" ids={ hiddenInput: \"checkbox-demo-terms-2\" } defaultChecked/>\n    <FieldContent>\n      <FieldLabel for=\"checkbox-demo-terms-2\">Accept terms and conditions</FieldLabel>\n      <FieldDescription>By clicking this checkbox, you agree to the terms.</FieldDescription>\n    </FieldContent>\n  </Field>\n  <Field orientation=\"horizontal\" disabled>\n    <Checkbox id=\"checkbox-demo-toggle\" disabled>Enable notifications</Checkbox>\n  </Field>\n  <Field orientation=\"horizontal\">\n    <Checkbox id=\"checkbox-demo-toggle-2\" ids={ hiddenInput: \"checkbox-demo-toggle-2\" }/>\n    <FieldContent>\n      <FieldLabel for=\"checkbox-demo-toggle-2\" class=\"mu-field-title\">Enable notifications</FieldLabel>\n      <FieldDescription>You can enable or disable notifications at any time.</FieldDescription>\n    </FieldContent>\n  </Field>\n</FieldGroup>","description":"Four common `Checkbox` + `Field` pairings: plain content, `FieldLabel` + `FieldDescription`, a disabled field, and `FieldTitle` + `FieldDescription`."},{"id":"checkbox-invalid","title":"Invalid","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\n\n<Field class=\"mx-auto w-56\" orientation=\"horizontal\" invalid>\n  <Checkbox id=\"checkbox-invalid-terms\" aria-invalid=\"true\" class=\"font-normal\">\n    Accept terms and conditions\n  </Checkbox>\n</Field>","description":"Set `aria-invalid=\"true\"` on the checkbox and `invalid` on the wrapping `Field` to show the invalid styles. Note the label is the checkbox's own `content` body, not a `FieldLabel` wrapper: `Checkbox` already renders a root `<label>` around its hidden input, so nesting a second `<label>` would be invalid HTML (upstream pairs a bare checkbox with an external label instead).","essential":true},{"id":"checkbox-checked","title":"Checked","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\n\n<Checkbox checked>\n  <span>Subscribe to newsletter</span>\n</Checkbox>","description":"Pass `checked` for a controlled checkbox, or `defaultChecked` to set only the initial state."},{"id":"checkbox-indeterminate","title":"Indeterminate","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\n\n<Checkbox checked=\"indeterminate\">\n  <span>Select all</span>\n</Checkbox>","description":"Pass `checked=\"indeterminate\"` for the tri-state \"select all\" pattern."},{"id":"checkbox-description","title":"Description","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\n\n<Field class=\"mx-auto w-72\" orientation=\"horizontal\">\n  <Checkbox id=\"checkbox-description-terms\" ids={ hiddenInput: \"checkbox-description-terms\" } defaultChecked/>\n  <FieldContent>\n    <FieldLabel for=\"checkbox-description-terms\">Accept terms and conditions</FieldLabel>\n    <FieldDescription>By clicking this checkbox, you agree to the terms and conditions.</FieldDescription>\n  </FieldContent>\n</Field>","description":"Use `FieldContent` and `FieldDescription` for helper text below the label."},{"id":"checkbox-disabled","title":"Disabled","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\n\n<div class=\"flex items-center gap-4\">\n  <Checkbox disabled>\n    <span>Disabled</span>\n  </Checkbox>\n  <Checkbox disabled checked>\n    <span>Disabled checked</span>\n  </Checkbox>\n</div>","description":"A disabled checkbox is skipped by the tab order and ignores pointer input."},{"id":"checkbox-controlled","title":"Controlled","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\n\n<let/checked=(false as boolean | \"indeterminate\")/>\n\n<div class=\"flex items-center gap-4\">\n  <Checkbox\n    checked=checked\n    checkedChange=(next) => { checked = next; }\n  >\n    <span>Controlled checkbox</span>\n  </Checkbox>\n  <span class=\"text-sm text-muted-foreground\">checked: ${String(checked)}</span>\n</div>","description":"Zag machines are controlled: a `checked` prop without a change handler never moves. Pair it with `checkedChange`, or use Marko's bind shorthand `checked:=state`.","essential":true},{"id":"checkbox-group","title":"Group","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\n\n<FieldSet>\n  <FieldLegend variant=\"label\">Show these items on the desktop:</FieldLegend>\n  <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\n  <FieldGroup class=\"gap-3\">\n    <Field orientation=\"horizontal\">\n      <Checkbox id=\"checkbox-group-hard-disks\" defaultChecked class=\"font-normal\">Hard disks</Checkbox>\n    </Field>\n    <Field orientation=\"horizontal\">\n      <Checkbox id=\"checkbox-group-external-disks\" defaultChecked class=\"font-normal\">External disks</Checkbox>\n    </Field>\n    <Field orientation=\"horizontal\">\n      <Checkbox id=\"checkbox-group-cds-dvds\" class=\"font-normal\">CDs, DVDs, and iPods</Checkbox>\n    </Field>\n    <Field orientation=\"horizontal\">\n      <Checkbox id=\"checkbox-group-connected-servers\" class=\"font-normal\">Connected servers</Checkbox>\n    </Field>\n  </FieldGroup>\n</FieldSet>","description":"Use multiple `Field`s inside a `FieldSet` to create a checkbox list."},{"id":"checkbox-table","title":"Table","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Table from \"@marko-ui/shadcn/ui/table/table.marko\";\nimport TableHeader from \"@marko-ui/shadcn/ui/table/header.marko\";\nimport TableBody from \"@marko-ui/shadcn/ui/table/body.marko\";\nimport TableRow from \"@marko-ui/shadcn/ui/table/row.marko\";\nimport TableHead from \"@marko-ui/shadcn/ui/table/head.marko\";\nimport TableCell from \"@marko-ui/shadcn/ui/table/cell.marko\";\n\nstatic const tableData = [\n  { id: \"1\", name: \"Sarah Chen\", email: \"sarah.chen@example.com\", role: \"Admin\" },\n  { id: \"2\", name: \"Marcus Rodriguez\", email: \"marcus.rodriguez@example.com\", role: \"User\" },\n  { id: \"3\", name: \"Priya Patel\", email: \"priya.patel@example.com\", role: \"User\" },\n  { id: \"4\", name: \"David Kim\", email: \"david.kim@example.com\", role: \"Editor\" },\n];\n\n<let/selectedRows=(new Set([\"1\"]) as Set<string>)/>\n<const/selectAll=(selectedRows.size === tableData.length)/>\n\n<const/handleSelectAll=(checked: boolean | \"indeterminate\") => {\n  selectedRows = checked === true ? new Set(tableData.map((row) => row.id)) : new Set();\n}/>\n\n<const/handleSelectRow=(id: string, checked: boolean | \"indeterminate\") => {\n  const next = new Set(selectedRows);\n  if (checked === true) {\n    next.add(id);\n  } else {\n    next.delete(id);\n  }\n  selectedRows = next;\n}/>\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead class=\"w-8\">\n        <Checkbox\n          id=\"checkbox-table-select-all\"\n          aria-label=\"Select all\"\n          checked=selectAll\n          checkedChange=handleSelectAll\n        />\n      </TableHead>\n      <TableHead>Name</TableHead>\n      <TableHead>Email</TableHead>\n      <TableHead>Role</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <for|row| of=tableData>\n      <TableRow data-state=(selectedRows.has(row.id) ? \"selected\" : undefined)>\n        <TableCell>\n          <Checkbox\n            id=`checkbox-table-row-${row.id}`\n            aria-label=`Select ${row.name}`\n            checked=selectedRows.has(row.id)\n            checkedChange=(checked) => handleSelectRow(row.id, checked)\n          />\n        </TableCell>\n        <TableCell class=\"font-medium\">${row.name}</TableCell>\n        <TableCell>${row.email}</TableCell>\n        <TableCell>${row.role}</TableCell>\n      </TableRow>\n    </for>\n  </TableBody>\n</Table>","description":"A select-all/select-row pattern built from `Table` and controlled `Checkbox`es."},{"id":"checkbox-rtl","title":"RTL","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\n\n<FieldGroup class=\"max-w-sm\" dir=\"rtl\">\n  <Field orientation=\"horizontal\">\n    <Checkbox id=\"checkbox-rtl-terms\">قبول الشروط والأحكام</Checkbox>\n  </Field>\n  <Field orientation=\"horizontal\">\n    <Checkbox id=\"checkbox-rtl-terms-2\" ids={ hiddenInput: \"checkbox-rtl-terms-2\" } defaultChecked/>\n    <FieldContent>\n      <FieldLabel for=\"checkbox-rtl-terms-2\">قبول الشروط والأحكام</FieldLabel>\n      <FieldDescription>بالنقر على هذا المربع، فإنك توافق على الشروط.</FieldDescription>\n    </FieldContent>\n  </Field>\n  <Field orientation=\"horizontal\" disabled>\n    <Checkbox id=\"checkbox-rtl-toggle\" disabled>تفعيل الإشعارات</Checkbox>\n  </Field>\n  <Field orientation=\"horizontal\">\n    <Checkbox id=\"checkbox-rtl-toggle-2\" ids={ hiddenInput: \"checkbox-rtl-toggle-2\" }/>\n    <FieldContent>\n      <FieldLabel for=\"checkbox-rtl-toggle-2\" class=\"mu-field-title\">تفعيل الإشعارات</FieldLabel>\n      <FieldDescription>يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</FieldDescription>\n    </FieldContent>\n  </Field>\n</FieldGroup>","description":"Checkboxes restyle correctly under `dir=\"rtl\"` — logical Tailwind properties, not physical ones, drive layout and text alignment."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}