Skip to main content

<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>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.
​
id
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.
​
as
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