Checkbox - Developer documentation

Example code

<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>

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

<juo-checkbox></juo-checkbox>

Reference

Parameters

default-value

attr · boolean | indeterminate

The value of the checkbox when it is initially rendered. Use when you do not need to control its value.

checked

prop · boolean | indeterminate | null

The controlled value of the checkbox. Can be binded with.

disabled

attr · boolean

When true, prevents the user from interacting with the checkbox

value

prop · AcceptableValue

The value given as data when submitted with a name.

attr · string

Id of the element

as-child

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.

prop · Component | AsTag

The element or component this component should render as. Can be overwritten by asChild.

name

attr · string

The name of the field. Submitted with its owning form as part of a name/value pair.

required

attr · boolean

When true, indicates that the user must set the value before the owning form can be submitted.

error

attr · boolean

default:"false"

Events

The element dispatches native CustomEvents; the payload is in event.detail.

change

CustomEvent

event.detail: [value: boolean | indeterminate]

Slots

default

slot

Card Chip

⌘I

​Usage

​Reference

​Parameters

​Events

​Slots

Usage

Reference

Parameters

Events

Slots