Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/checkbox.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Checkbox
Lets a user select one or more independent options.
```html
<noora-checkbox label="Send notifications" name="notifications"></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. |
## Read-only properties
| Property | Type | Description |
| --- | --- | --- |
| `control` | `HTMLInputElement \| null` | The native checkbox input. |
| `form` | `HTMLFormElement \| null` | The associated form. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `input` | `InputEvent` | Emitted while the checked state changes. |
| `change` | `Event` | Emitted after the checked state changes. |
## Styling parts
| Part | Description |
| --- | --- |
| `root` | The checkbox label. |
| `control` | The visual checkbox control. |
| `label` | The label text. |
The component emits standard input and change events.
## Basic states
Checkboxes support unchecked, checked, and indeterminate states.
```html
<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.
```html
<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.
```html
<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.
```html
<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>
```