CheckboxReady

Checkboxes allow user to choose one or more options from a limited set of options. If you have more than 10 options, please use Select component instead.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-checkbox label="Label" value="Value"></nord-checkbox>

Properties

PropertyAttributeDescriptionTypeDefault
indeterminateindeterminate

Controls whether the checkbox is in an indeterminate state.

booleanfalse
checkedchecked

Controls whether the checkbox is checked or not.

booleanfalse
sizesize

The size of the component.

"s" | "m" | "l""m"
labellabel

Label for the input.

string""
hinthint

Optional hint text to be displayed with the input. Alternatively use the hint slot.

string | undefinedundefined
hideLabelhide-label

Visually hide the label, but still show it to assistive technologies like screen readers.

booleanfalse
placeholderplaceholder

Placeholder text to display within the input.

string | undefinedundefined
errorerror

Optional error to be shown with the input. Alternatively use the error slot.

string | undefinedundefined
requiredrequired

Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.

booleanfalse
hideRequiredhide-required

Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.

booleanfalse
disableddisabled

Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.

booleanfalse
namename

The name of the form component.

string | undefinedundefined
valuevalue

The value of the form component.

string""
formform

Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.

HTMLFormElement | nullundefined

Events

EventDescriptionType
input

Fired as the user types into the input.

NordEvent
change

Fired whenever the input's value is changed via user interaction.

NordEvent

Slots

Slot nameDescription
label

Use when a label requires more than plain text.

hint

Optional slot that holds hint text for the input.

error

Optional slot that holds error text for the input.

Methods

Method nameParametersDescription
focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.

Programmatically move focus to the component.

blur() => voidN/A

Programmatically remove focus from the component.

click() => voidN/A

Programmatically simulates a click on the component.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-label-color

Controls the text color of the label, using our color tokens.

var(--n-color-text)

Dependencies

This component is internally dependent on the following components:


Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

  • Use for making it possible to choose one or more options from a limited number of options.
  • Use for “accepting terms of service” and similar functionality.
  • Use in forms to toggle something on or off.

Don’t

  • Avoid using when you have more than 10 options to choose from.
  • Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.

Content guidelines

Checkbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:

User settings
Option 1

When writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

User settings
User Settings

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

Show dashboard
Show dashboard.

Do not use commas or semicolons at the end of each line

Patients
Patients;

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.