Checkboxes

React wraps Base UI’s Checkbox.Root (a <button role="checkbox">); vanilla styles a native <input type="checkbox"> with the same classes.

Examples

Default

Vanilla CSS

<input type="checkbox" class="checkbox" />
<input type="checkbox" class="checkbox" checked />

React

<Checkbox />
<Checkbox defaultChecked />

Disabled

Vanilla CSS

<input type="checkbox" class="checkbox" disabled />
<input type="checkbox" class="checkbox" disabled checked />

React

<Checkbox disabled />
<Checkbox disabled defaultChecked />

Indeterminate

Set imperatively in vanilla via node.indeterminate = true; React takes an indeterminate prop. The CSS treats it identically to checked.

Vanilla CSS

<input type="checkbox" class="checkbox" id="indeterm" />
<script>
  document.getElementById("indeterm").indeterminate = true;
</script>

React

<Checkbox indeterminate />

Inside a Field

A <label> wrapping a .checkbox lays out inline automatically.

Subscribe to the newsletter

One short email per month. Unsubscribe anytime.

Vanilla CSS

<div class="field">
  <label class="field-label">
    <input type="checkbox" class="checkbox" name="newsletter" />
    Subscribe to the newsletter
  </label>
  <p class="field-description">
    One short email per month. Unsubscribe anytime.
  </p>
</div>

React

<Field name="newsletter">
  <Field.Label>
    <Checkbox />
    Subscribe to the newsletter
  </Field.Label>
  <Field.Description>
    One short email per month. Unsubscribe anytime.
  </Field.Description>
</Field>