noora/docs/components/checkbox.md
Lets a user select one or more independent options.
<noora-checkbox label="Send notifications" name="notifications"></noora-checkbox>
| 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. |
| Property | Type | Description |
|---|---|---|
control | HTMLInputElement | null | The native checkbox input. |
form | HTMLFormElement | null | The associated form. |
| Event | Type | Description |
|---|---|---|
input | InputEvent | Emitted while the checked state changes. |
change | Event | Emitted after the checked state changes. |
| Part | Description |
|---|---|
root | The checkbox label. |
control | The visual checkbox control. |
label | The label text. |
The component emits standard input and change events.
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>
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>
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>
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>