Checkbox

Form element that allows users to select one or more options from a set.

Class name Type
.prs-checkbox Component For <input>
.prs-checkbox-label Component For <label>
.prs-checkbox_indeterminate State Manually apply indeterminate
.prs-checkbox_focus State Manually apply focus

  • Default 

    <label class="prs-checkbox-label">
  <input type="checkbox" class="prs-checkbox" />
  <span class="prs-label-text">Label</span>
</label>
<label class="prs-checkbox-label">
  <input type="checkbox" class="prs-checkbox" checked />
  <span class="prs-label-text">Label</span>
</label>

  • Indeterminate

    With some help from Alpine.js.

    <label class="prs-checkbox-label">
  <input x-init="$el.indeterminate = true" @click="$el.indeterminate = true" type="checkbox" class="prs-checkbox" />
  <span class="prs-label-text">Indeterminate</span>
</label>

  • Focus

    Focus styles will apply automatically, but we also provide .prs-checkbox_focus if you need to manually apply the focus state.

    <label class="prs-checkbox-label">
  <input @click.prevent type="checkbox" class="prs-checkbox prs-checkbox_focus" />
  <span class="prs-label-text">Unchecked</span>
</label>
<label class="prs-checkbox-label">
  <input @click.prevent type="checkbox" class="prs-checkbox prs-checkbox_focus" checked />
  <span class="prs-label-text">Checked</span>
</label>
<label class="prs-checkbox-label">
  <input x-init="$el.indeterminate = true" @click.prevent type="checkbox" class="prs-checkbox prs-checkbox_focus" />
  <span class="prs-label-text">Indeterminate</span>
</label>

  • Disabled

    With some help from Alpine.js.

    <label class="prs-checkbox-label">
  <input type="checkbox" class="prs-checkbox" disabled />
  <span class="prs-label-text">Unchecked</span>
</label>
<label class="prs-checkbox-label">
  <input type="checkbox" class="prs-checkbox" checked disabled />
  <span class="prs-label-text">Checked</span>
</label>
<label class="prs-checkbox-label">
  <input x-init="$el.indeterminate = true" type="checkbox" class="prs-checkbox" disabled />
  <span class="prs-label-text">Indeterminate</span>
</label>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-checkbox {
  --chk-bg: var(--prs-c-primary);
  --chk-fg: var(--prs-c-white);
  appearance: none;
  border: 1px solid currentColor;
  width: 1rem;
  height: 1rem;
  background-color: var(--prs-c-white);
  color: var(--prs-c-gray-600);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--prs-radius-btn);

  &:checked,
  &[aria-checked=true] {
    background-color: var(--chk-bg);
    background-image:
      linear-gradient(-45deg, transparent 65%, var(--chk-bg) 65.99%),
      linear-gradient(45deg, transparent 75%, var(--chk-bg) 75.99%),
      linear-gradient(-45deg, var(--chk-bg) 40%, transparent 40.99%),
      linear-gradient(45deg, var(--chk-bg) 30%, var(--chk-fg) 30.99%, var(--chk-fg) 40%, transparent 40.99%),
      linear-gradient(-45deg, var(--chk-fg) 50%, var(--chk-bg) 50.99%);
    background-repeat: no-repeat;
    animation: checkmark 0.2s ease-out;
  }

  &:indeterminate,
  &.prs-checkbox_indeterminate {
    background-color: var(--chk-fg);
    background-image:
      linear-gradient(90deg, transparent 80%, var(--chk-bg) 80%),
      linear-gradient(-90deg, transparent 80%, var(--chk-bg) 80%),
      linear-gradient(0deg, var(--chk-bg) 43%, var(--chk-fg) 43%, var(--chk-fg) 57%, var(--chk-bg) 57%);
    background-repeat: no-repeat;
    animation: checkmark 0.2s ease-out;
  }

  &:focus-visible,
  &.prs-checkbox_focus {
    outline: 2px solid var(--prs-c-primary);
    outline-offset: 1px;
  }

  &:disabled {
    --chk-bg: var(--prs-c-gray-100);
    --chk-fg: currentColor;
    background-color: var(--prs-c-gray-100);
    color: var(--prs-c-gray-300);
    cursor: not-allowed;
  }
}

@keyframes checkmark {
  0% { background-position-y: 5px }
  50% { background-position-y: -2px }
  100% { background-position-y: 0 }
}

Coming soon...