Checkbox

A checkbox (with a real hidden input for form submission). Supports an "indeterminate" state.

I agree to the terms

<label
  data-controller="zag-checkbox"
  data-part="root"
  data-zag-checkbox-name-value="terms"
  class="flex cursor-pointer items-center gap-3"
>
  <input data-part="hidden-input" class="sr-only" />
  <span
    data-part="control"
    class="border-input bg-popover data-[state=checked]:border-primary data-[state=checked]:bg-primary grid h-5 w-5 place-items-center rounded border transition-colors"
  >
    <span data-part="indicator" hidden class="text-xs text-white">✓</span>
  </span>
  <span data-part="label" class="text-sm font-medium">I agree to the terms</span>
</label>

Parts

root, control, indicator, label, hidden-input.

Values

Attribute	Type	Default	Description
data-zag-checkbox-checked-value	Boolean	false	Checked by default.
data-zag-checkbox-name-value	String	""	name of the hidden input (for forms).
data-zag-checkbox-value-value	String	"on"	Submitted value when checked.
data-zag-checkbox-disabled-value	Boolean	false	Disable the checkbox.
data-zag-checkbox-required-value	Boolean	false	Mark the field required.
data-zag-checkbox-invalid-value	Boolean	false	Mark the field invalid.
data-zag-checkbox-read-only-value	Boolean	false	Read-only.

Events

Emits zag-checkbox:change — detail is { checked } (which may be "indeterminate").

Programmatic control

checked (getter), check(), uncheck(), toggle().