Checkbox

Checkboxes allow users to select multiples options or only one.

Example

Wonderful choice

<nj-checkbox>
  <div class="nj-checkbox">
    <label>
      <input type="checkbox"> Wonderful choice
    </label>
  </div>
</nj-checkbox>

Use only the tag <nj-checkbox></nj-checkbox> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.

<form>
  <div class="nj-form-group">
    <nj-checkbox>
      <div class="nj-checkbox">
        <label>
          <input type="checkbox"> Wonderful choice
        </label>
      </div>
    </nj-checkbox>
    <nj-checkbox>
    <div class="nj-checkbox">
      <label>
        <input type="checkbox"> Bad choice
      </label>
    </div>
    </nj-checkbox>
    <nj-checkbox>
    <div class="nj-checkbox nj-checkbox--disabled">
      <label>
        <input type="checkbox" disabled> Disabled choice
      </label>
    </div>
    </nj-checkbox>
  </div>

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