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-semantic-size-spacing-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-semantic-size-spacing-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-semantic-size-spacing-32);">
<div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-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-semantic-size-spacing-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.
<form>
<div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-8); margin-bottom: var(--nj-semantic-size-spacing-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.
<form>
<div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-8); margin-bottom: var(--nj-semantic-size-spacing-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>