Checkbox

A checkbox is an input control that allows the user to give a feedback by choosing several items from a list of options. For example, you can use checkbox when user may have to select multiple options from a list of items, or when an explicit action is required to apply the settings in your product.

Angular

React

Vanilla

Figma

Last updated v5.0.0

Example

<form>
  <div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-8);">
    <div class="nj-checkbox">
      <label for="checkbox-1">
        <input type="checkbox" id="checkbox-1">
        <span class="nj-checkbox__label">First basic checkbox</span>
      </label>
    </div>
    <div class="nj-checkbox">
      <label for="checkbox-2">
        <input type="checkbox" id="checkbox-2">
        <span class="nj-checkbox__label">Second basic checkbox</span>
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--disabled">
      <label for="checkbox-3">
        <input type="checkbox" disabled id="checkbox-3">
        <span class="nj-checkbox__label">Third basic checkbox (disabled)</span>
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--disabled">
      <label for="checkbox-4">
        <input type="checkbox" checked disabled id="checkbox-4">
        <span class="nj-checkbox__label">Fourth basic checkbox (checked + disabled)</span>
      </label>
    </div>
    <div class="nj-checkbox">
      <label for="checkbox-5">
        <input type="checkbox" id="checkbox-5">
        <span class="nj-checkbox__label">
          Fifth basic checkbox with a very long label to show off this particular behaviour.
          The checkbox decorator stays at the top while the label pushes the rest of the content to the bottom.
          Try navigation with the keyboard to see how the focus ring is treated.
        </span>
      </label>
    </div>
  </div>
</form>

Sizes

<form>
  <div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-8);">
    <div class="nj-checkbox">
      <label for="medium-checkbox">
        <input type="checkbox" id="medium-checkbox">
        <span class="nj-checkbox__label">Basic checkbox</span>
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--lg">
      <label for="large-checkbox">
        <input type="checkbox" id="large-checkbox">
        <span class="nj-checkbox__label">Large checkbox</span>
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--xl">
      <label for="extra-large-checkbox">
        <input type="checkbox" id="extra-large-checkbox">
        <span class="nj-checkbox__label">Extra large checkbox</span>
      </label>
    </div>
  </div>
</form>

Required

Required checkbox

<div class="nj-checkbox">
  <label for="required-checkbox">
    <input type="checkbox" id="required-checkbox" required>
    <span class="nj-checkbox__label">
      Required checkbox
      <span aria-hidden="true" class="nj-checkbox__required">*</span>
    </span>
  </label>
</div>

Error

Invalid checkbox

Invalid checkbox error message

<div class="nj-checkbox">
  <label for="checkbox-error-1">
    <input
      type="checkbox"
      id="checkbox-error-1"
      name="choice"
      required
      aria-invalid="true"
      aria-describedby="linked-error-message-id">
      <span class="nj-checkbox__label">
        Invalid checkbox
        <span aria-hidden="true" class="nj-checkbox__required">*</span>
      </span>
  </label>
  <p class="nj-checkbox__error" id="linked-error-message-id">
    <span
      aria-hidden="true"
      class="nj-checkbox__error-icon material-icons nj-icon-material nj-icon-material--color-inherit nj-icon-material--sm"
    >
      warning
    </span>
    Invalid checkbox error message
  </p>
</div>

Cards

Collapse