Turns a setting on or off.
Turns a setting on or off.
import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";
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>
| 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. |
| Event | Type | Description |
|---|---|---|
input
|
InputEvent
|
Emitted while the checked state changes. |
change
|
Event
|
Emitted after the checked state changes. |
| Name | Description |
|---|---|
root
|
The toggle label. |
control
|
The visual switch. |
label
|
The label text. |
The component emits standard input and change events.