Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Checkbox draft

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
<nord-checkbox label="Label" value="Value"></nord-checkbox>

Properties

PropertyAttributeDescriptionTypeDefault
checkedcheckedControls whether the checkbox is checked or not.booleanfalse
labellabelLabel for the input.string""
hinthintOptional hint text to be displayed with the input. Alternatively use the hint slot.string | undefinedundefined
hideLabelhide-labelVisually hide the label, but still show it to assistive technologies like screen readers.booleanfalse
placeholderplaceholderPlaceholder text to display within the input.string | undefinedundefined
errorerrorOptional error to be shown with the input. Alternatively use the error slot.string | undefinedundefined
requiredrequiredDetermines 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
expandexpandControls whether the input expands to fill the width of its container.booleanfalse
disableddisabledMakes the input component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.booleanfalse
namenameThe name of the input component.string | undefinedundefined
valuevalueThe value of the input component.string""

Events

EventDescriptionType
inputFired as the user types into the input.NordEvent
changeFired whenever the input's value is changed via user interaction.NordEvent

Methods

focus(options?: FocusOptions) => void

Programmatically move focus to the component

options
An object which controls aspects of the focusing process.

blur() => void

Programmatically remove focus from the component.

click() => void

Programmatically simulates a click on the component.


Slots

Slot nameDescription
labelUse when a label requires more than plain text.
hintOptional slot that holds hint text for the input.
errorOptional slot that holds error text for the input.

Usage

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

Integration

For integration guidelines, please see Using Components. 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.