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>