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>