# Toggle Turns a setting on or off. ```html ``` ## 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 ``` ## Disabled states Show disabled settings in both states. ```html ``` ## With description Explain the setting below its label. ```html ```