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>

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>
  <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 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>

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>

Error

HTML5 Native Form validation is taken into account with the required attribute.

<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" name="choice" id="choice1"> Non required choice
      </label>
    </div>
    <div class="nj-checkbox">
      <label>
        <input type="checkbox" name="choice" id="choice3" required> Required choice
      </label>
    </div>
  </div>
</form>

You can also force error style with the .has-danger class on the nj-form-group element.

<form>
  <div class="nj-form-group has-danger" style="display: flex; flex-direction: column; gap: var(--nj-size-space-8);">
    <div class="nj-checkbox">
      <label>
        <input type="checkbox" name="choice" id="choice1"> Wonderful choice
      </label>
    </div>
    <div class="nj-checkbox">
      <label>
        <input type="checkbox" name="choice" id="choice2"> Bad choice
      </label>
    </div>
    <div class="nj-checkbox">
      <label>
        <input type="checkbox" name="choice" id="choice3"> Disabled choice
      </label>
    </div>
  </div>
</form>