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.

Example

<form>
  <div class="nj-form-group" style="display: flex; flex-direction: column; gap: var(--nj-size-space-8);">
    <div class="nj-checkbox">
      <label>
        <input type="checkbox" checked> Wonderful choice
      </label>
    </div>
    <div class="nj-checkbox">
      <label>
        <input type="checkbox"> Neutral choice
      </label>
    </div>
    <div class="nj-checkbox">
      <label>
        <input type="checkbox"> Bad choice
      </label>
    </div>
  </div>
</form>

<form>
  <div class="nj-form-group" style="display: flex; flex-direction: column; gap: var(--nj-size-space-8);">
    <div class="nj-checkbox">
      <label for="choice-1">
        <input type="checkbox" id="choice-1" checked> Wonderful choice
      </label>
    </div>
    <div class="nj-checkbox">
      <label for="choice-2">
        <input type="checkbox" id="choice-2"> Neutral choice
      </label>
    </div>
    <div class="nj-checkbox">
      <label for="choice-3">
        <input type="checkbox" id="choice-3"> Bad choice
      </label>
    </div>
  </div>
</form>

Disabled

To disable a checkbox, simply add the .nj-checkbox--disabled modifier to the element and the disabled boolean attribute to the input.

You can have disabled checked checkboxes.

<form style="margin-bottom: var(--nj-size-space-32);">
  <div style="display: flex; flex-direction: column; gap: var(--nj-size-space-8);">
    <div class="nj-checkbox">
      <label>
        <input type="checkbox" checked> Wonderful choice
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--disabled">
      <label>
        <input type="checkbox" disabled> Disabled choice
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--disabled">
      <label>
        <input type="checkbox" checked disabled> Disabled checked choice
      </label>
    </div>
  </div>
</form>
<form>
  <div style="display: flex; flex-direction: column; gap: var(--nj-size-space-8);">
    <div class="nj-checkbox">
      <label for="choice-1">
        <input type="checkbox" id="choice-1" checked> Wonderful choice
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--disabled">
      <label for="choice-2">
        <input type="checkbox" disabled id="choice-2"> Disabled choice
      </label>
    </div>
    <div class="nj-checkbox nj-checkbox--disabled">
      <label for="choice-3">
        <input type="checkbox" checked disabled id="choice-3"> Disabled checked choice
      </label>
    </div>
  </div>
</form>

Inline

Add the .nj-checkbox--inline modifier.

<form>
  <div class="nj-checkbox nj-checkbox--inline">
    <label>
      <input type="checkbox"> Inline choice 1
    </label>
  </div>
  <div class="nj-checkbox nj-checkbox--inline">
    <label>
      <input type="checkbox"> Inline choice 2
    </label>
  </div>
  <div class="nj-checkbox nj-checkbox--inline nj-checkbox--disabled">
    <label>
      <input type="checkbox" disabled> Inline choice 3 disabled
    </label>
  </div>
</form>
<form>
  <div class="nj-checkbox nj-checkbox--inline">
    <label for="choice-5">
      <input type="checkbox" id="choice-5"> Inline choice 1
    </label>
  </div>
  <div class="nj-checkbox nj-checkbox--inline">
    <label for="choice-6">
      <input type="checkbox" id="choice-6"> Inline choice 2
    </label>
  </div>
  <div class="nj-checkbox nj-checkbox--inline nj-checkbox--disabled">
    <label for="choice-7">
      <input type="checkbox" disabled id="choice-7"> Inline choice 3 disabled
    </label>
  </div>
</form>

Error

HTML5 Native Form validation is taken into account with the required attribute. Fields with * are mandatory.

Wonderful error message

Bad error message

Disabled error message

<form>
  <div style="display: flex; flex-direction: column; gap: var(--nj-size-space-8); margin-bottom: var(--nj-size-space-16)">
    <div class="nj-checkbox">
      <label for="choice-error-1">
        <input type="checkbox" required name="choice" id="choice-error-1" aria-invalid="true" aria-describedby="choice-error-message-1"> Wonderful choice*
      </label>
      <p class="nj-checkbox__error" id="choice-error-message-1">
        <span aria-hidden="true" class="nj-checkbox__error-icon material-icons md-18">warning</span>
        Wonderful error message
      </p>
    </div>
    <div class="nj-checkbox">
      <label for="choice-error-2">
        <input type="checkbox" required name="choice" id="choice-error-2" aria-invalid="true" aria-describedby="choice-error-message-2"> Bad choice*
      </label>
      <p class="nj-checkbox__error" id="choice-error-message-2">
        <span aria-hidden="true" class="nj-checkbox__error-icon material-icons md-18">warning</span>
        Bad error message
      </p>
    </div>
    <div class="nj-checkbox">
      <label for="choice-error-3">
        <input type="checkbox" required name="choice" id="choice-error-3" aria-invalid="true" aria-describedby="choice-error-message-3"> Disabled choice*
      </label>
      <p class="nj-checkbox__error" id="choice-error-message-3">
        <span aria-hidden="true" class="nj-checkbox__error-icon material-icons md-18">warning</span>
        Disabled error message
      </p>
    </div>
  </div>
</form>

You can also force error style with the .has-danger class.

Bad error message

<form>
  <div style="display: flex; flex-direction: column; gap: var(--nj-size-space-8); margin-bottom: var(--nj-size-space-16)">
    <div class="nj-checkbox has-danger">
      <label for="choice-error-4">
        <input type="checkbox" name="choice" id="choice-error-4" aria-invalid="true"> Wonderful choice
      </label>
    </div>
    <div class="nj-checkbox has-danger">
      <label for="choice-error-5">
        <input type="checkbox" name="choice" id="choice-error-5" aria-invalid="true"> Bad choice
      </label>
      <p class="nj-checkbox__error" id="choice-error-message-3">
        <span aria-hidden="true" class="nj-checkbox__error-icon material-icons md-18">warning</span>
        Bad error message
      </p>
    </div>
    <div class="nj-checkbox has-danger">
      <label for="choice-error-6">
        <input type="checkbox" name="choice" id="choice-error-6" aria-invalid="true"> Disabled choice
      </label>
    </div>
  </div>
</form>