> ## Documentation Index
> Fetch the complete documentation index at: https://juo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox

> Accessible checkbox with checked, unchecked, and indeterminate states, plus an error style.

<Frame>
  <iframe src="data:text/html;base64,PCEtLSBUaGlzIGZpbGUgaXMgYXV0by1nZW5lcmF0ZWQgYnkgc2NyaXB0cy9nZW5lcmF0ZS1kb2NzLnRzLiBEbyBub3QgZWRpdCBtYW51YWxseS4gLS0+CjwhRE9DVFlQRSBodG1sPgo8aHRtbCBsYW5nPSJlbiI+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9IlVURi04Ij4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQGp1by9jdXN0b21lci11aS9kaXN0L3dlYi1jb21wb25lbnRzLmlpZmUuanMiPjwvc2NyaXB0PgogIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9pbnRlci11aUAzLjE5LjMvaW50ZXIubWluLmNzcyIgLz4KICA8c3R5bGU+CiAgICAqIHsgYm94LXNpemluZzogYm9yZGVyLWJveDsgbWFyZ2luOiAwOyBwYWRkaW5nOiAwOyB9CiAgICBodG1sLCBib2R5IHsgaGVpZ2h0OiAxMDAlOyB9CiAgICBib2R5IHsgZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGZvbnQtZmFtaWx5OiAiSW50ZXIgdmFyIiwgc2Fucy1zZXJpZjsgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7IC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7IH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgoKPGRpdiBzdHlsZT0iZGlzcGxheTpmbGV4OyBnYXA6MTZweDsgYWxpZ24taXRlbXM6Y2VudGVyOyBmb250LWZhbWlseTpzYW5zLXNlcmlmOyI+CiAgPGp1by1jaGVja2JveD48L2p1by1jaGVja2JveD4KICA8anVvLWNoZWNrYm94IGlkPSJjYi1jaGVja2VkIj48L2p1by1jaGVja2JveD4KICA8anVvLWNoZWNrYm94IGlkPSJjYi1pbmQiPjwvanVvLWNoZWNrYm94Pgo8L2Rpdj4KPHNjcmlwdD4KICAvLyBqdW8tY2hlY2tib3ggYWxpYXNlcyB0aGUgY2hlY2tlZCBzdGF0ZSB0byB0aGUgYGNoZWNrZWRgIHByb3BlcnR5CiAgLy8gKGB2YWx1ZWAgaXMgcmVrYS11aSdzIHNlcGFyYXRlIGZvcm0tdmFsdWUgcHJvcCwgc2VlIFBST1BfTkFNRV9NQVApLgogIGNvbnN0IGNoZWNrZWQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY2ItY2hlY2tlZCcpOwogIGlmIChjaGVja2VkKSBjaGVja2VkLmNoZWNrZWQgPSB0cnVlOwogIGNvbnN0IGluZGV0ZXJtaW5hdGUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY2ItaW5kJyk7CiAgaWYgKGluZGV0ZXJtaW5hdGUpIGluZGV0ZXJtaW5hdGUuY2hlY2tlZCA9ICdpbmRldGVybWluYXRlJzsKPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPgo=" style={{ width: "100%", height: "120px", border: "none" }} />
</Frame>

<Accordion title="Example code">
  ```html theme={null}

  <div style="display:flex; gap:16px; align-items:center; font-family:sans-serif;">
    <juo-checkbox></juo-checkbox>
    <juo-checkbox id="cb-checked"></juo-checkbox>
    <juo-checkbox id="cb-ind"></juo-checkbox>
  </div>
  <script>
    // juo-checkbox aliases the checked state to the `checked` property
    // (`value` is reka-ui's separate form-value prop, see PROP_NAME_MAP).
    const checked = document.getElementById('cb-checked');
    if (checked) checked.checked = true;
    const indeterminate = document.getElementById('cb-ind');
    if (indeterminate) indeterminate.checked = 'indeterminate';
  </script>
  ```
</Accordion>

Accessible checkbox with checked, unchecked, and indeterminate states, plus an error style. Built
on Reka UI with full keyboard navigation and screen-reader accessibility.

## Usage

```html theme={null}
<juo-checkbox></juo-checkbox>
```

## Reference

### Parameters

<ParamField path="default-value" type="attr · boolean | indeterminate">
  The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
</ParamField>

<ParamField path="checked" type="prop · boolean | indeterminate | null">
  The controlled value of the checkbox. Can be binded with.
</ParamField>

<ParamField path="disabled" type="attr · boolean">
  When `true`, prevents the user from interacting with the checkbox
</ParamField>

<ParamField path="value" type="prop · AcceptableValue">
  The value given as data when submitted with a `name`.
</ParamField>

<ParamField path="id" type="attr · string">
  Id of the element
</ParamField>

<ParamField path="as-child" type="attr · boolean">
  Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
</ParamField>

<ParamField path="as" type="prop · Component | AsTag">
  The element or component this component should render as. Can be overwritten by `asChild`.
</ParamField>

<ParamField path="name" type="attr · string">
  The name of the field. Submitted with its owning form as part of a name/value pair.
</ParamField>

<ParamField path="required" type="attr · boolean">
  When `true`, indicates that the user must set the value before the owning form can be submitted.
</ParamField>

<ParamField path="error" type="attr · boolean" default="false" />

### Events

The element dispatches native [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent)s; the payload is in `event.detail`.

<ResponseField name="change" type="CustomEvent">
  `event.detail`: `[value: boolean | indeterminate]`
</ResponseField>

### Slots

<ResponseField name="default" type="slot" />
