Skip to main content

Checkbox

Auto-styled native checkbox with check icon.

Selectors

input[type="checkbox"]
Auto-styled checkbox within .cider scope.

Default

HTML 
<div class="space-y-2.5">
  <label>
    <input type="checkbox" />
    Accept terms and conditions
  </label>
  <label>
    <input type="checkbox" checked />
    Remember me
  </label>
</div>

Disabled

HTML 
<div class="space-y-2.5">
  <label>
    <input type="checkbox" disabled />
    Unchecked disabled
  </label>
  <label>
    <input type="checkbox" checked disabled />
    Checked disabled
  </label>
</div>

With Text

HTML 
<label>
  <input type="checkbox" />
  <span>Subscribe to newsletter</span>
  <small>Receive weekly updates on new features and tips.</small>
</label>

Group

Interests
HTML 
<fieldset>
  <legend>Interests</legend>
  <label>
    <input type="checkbox" name="interests" value="design" checked />
    Design
  </label>
  <label>
    <input type="checkbox" name="interests" value="engineering" />
    Engineering
  </label>
  <label>
    <input type="checkbox" name="interests" value="marketing" />
    Marketing
  </label>
</fieldset>