noora/docs/components/toggle.md
Turns a setting on or off.
<noora-toggle label="Notifications" name="notifications"></noora-toggle>
| 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. |
| 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 toggle label. |
control | The visual switch. |
label | The label text. |
The component emits standard input and change events.
Compare off and on settings.
<noora-toggle label="Enable notifications"></noora-toggle>
<noora-toggle label="Email alerts" checked></noora-toggle>
Show disabled settings in both states.
<noora-toggle label="Disabled off" disabled></noora-toggle>
<noora-toggle label="Disabled on" checked disabled></noora-toggle>
Explain the setting below its label.
<noora-toggle label="Marketing emails" description="Receive updates about new features and promotions"></noora-toggle>