Checkbox

Lets a user select one or more independent options.

Checkbox web component

Lets a user select one or more independent options.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Basic states

Checkboxes support unchecked, checked, and indeterminate states.

<noora-checkbox label="Enable notifications"></noora-checkbox>
<noora-checkbox checked label="Email alerts"></noora-checkbox>
<noora-checkbox indeterminate label="Select all items"></noora-checkbox>

Disabled states

Every selection state has a disabled presentation.

<noora-checkbox disabled label="Disabled unchecked"></noora-checkbox>
<noora-checkbox disabled checked label="Disabled checked"></noora-checkbox>
<noora-checkbox disabled indeterminate label="Disabled indeterminate"></noora-checkbox>

Descriptions

Add supporting context below the label.

<noora-checkbox label="Marketing emails" description="Receive updates about new features and promotions"></noora-checkbox>
<noora-checkbox checked label="Remember my preferences" description="Save your settings for future visits"></noora-checkbox>

Practical examples

Use checkboxes for agreements, subscriptions, and optional settings.

<noora-checkbox required label="I agree to the Terms of Service" description="By checking this box, you agree to our terms and conditions"></noora-checkbox>
<noora-checkbox label="Subscribe to our newsletter" description="Get weekly updates delivered to your inbox"></noora-checkbox>
<noora-checkbox checked label="Enable dark mode" description="Switch to a darker color scheme"></noora-checkbox>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`""`	Sets the visible label.
`description`	string	`None`	Sets supporting text.
`checked`	boolean	`false`	Controls the checked state.
`indeterminate`	boolean	`false`	Controls the mixed state.
`disabled`	boolean	`false`	Disables interaction.
`name`	string	`""`	Sets the submitted field name.
`value`	string	`"on"`	Sets the submitted field value.
`required`	boolean	`false`	Marks the field as required.

Events

Event	Type	Description
`input`	`InputEvent`	Emitted while the checked state changes.
`change`	`Event`	Emitted after the checked state changes.

Styling parts

Name	Description
`root`	The checkbox label.
`control`	The visual checkbox control.
`label`	The label text.

Behavior

The component emits standard input and change events.