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/toggle.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Toggle
Turns a setting on or off.
```html
<noora-toggle label="Notifications" name="notifications"></noora-toggle>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | None | Sets the visible label. |
| `description` | `string` | None | Sets supporting text. |
| `checked` | `boolean` | `false` | Controls the checked state. |
| `disabled` | `boolean` | `false` | Disables interaction. |
| `name` | `string` | `""` | Sets the submitted field name. |
| `value` | `string` | `"on"` | Sets the submitted field value. |
## 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 toggle label. |
| `control` | The visual switch. |
| `label` | The label text. |
The component emits standard input and change events.
## Basic states
Compare off and on settings.
```html
<noora-toggle label="Enable notifications"></noora-toggle>
<noora-toggle label="Email alerts" checked></noora-toggle>
```
## Disabled states
Show disabled settings in both states.
```html
<noora-toggle label="Disabled off" disabled></noora-toggle>
<noora-toggle label="Disabled on" checked disabled></noora-toggle>
```
## With description
Explain the setting below its label.
```html
<noora-toggle label="Marketing emails" description="Receive updates about new features and promotions"></noora-toggle>
```