Toggle
Capture on/off choices with a compact, accessible toggle control.
x-t-toggle
Preview and Examples
<x-t-toggle name="newsletter" label="Email me product updates" /> <x-t-toggle name="terms" label="Accept terms and conditions" checked variant="brand" /> <x-t-toggle name="alerts" label="Enable push alerts" size="lg" shadow ring variant="primary" />Attributes
| Name | Type | Options | Description |
|---|---|---|---|
| border | boolean |
true
false
|
Adds a border |
| label | string |
string
|
Adds a text label |
| ring | boolean |
true
false
|
Adds a ring |
| rounded | boolean |
true
false
|
Adds rounded corners |
| shadow | boolean |
true
false
|
Adds a shadow |
| size | string |
xs
sm
md
lg
xl
2xl
|
Controls component scale |
| variant | string |
default
brand
primary
secondary
success
warning
danger
light
dark
|
A variant is like a colour palette |