Switch
<wa-switch>
Switches allow the user to toggle an option on or off.
<wa-switch>Switch</wa-switch>
This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
Examples Jump to heading
Checked Jump to heading
Use the checked attribute to activate the switch.
<wa-switch checked>Checked</wa-switch>
Disabled Jump to heading
Use the disabled attribute to disable the switch.
<wa-switch disabled>Disabled</wa-switch>
Sizes Jump to heading
Use the size attribute to change a switch's size.
<wa-switch size="small">Small</wa-switch> <br /> <wa-switch size="medium">Medium</wa-switch> <br /> <wa-switch size="large">Large</wa-switch>
Hint Jump to heading
Add descriptive hint to a switch with the hint attribute. For hints that contain HTML, use the hint slot instead.
<wa-switch hint="What should the user know about the switch?">Label</wa-switch>
Custom Styles Jump to heading
Use the available custom properties to change how the switch is styled.
<wa-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</wa-switch>
Slots Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The switch's label. |
hint
|
Text that describes how to use the switch. Alternatively, you can use the hint attribute. |
Attributes & Properties Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
namename |
The name of the switch, submitted as a name/value pair with form data.
Type
string | nullDefault
null |
|
|
valuevalue |
The value of the switch, submitted as a name/value pair with form data.
Type
string | null |
|
|
sizesize |
The switch's size.
Type
'small' | 'medium' | 'large'Default
'medium' |
|
|
disableddisabled |
Disables the switch.
Type
booleanDefault
false |
||
checked |
Draws the switch in a checked state.
Type
boolean |
||
defaultCheckedchecked |
The default value of the form control. Primarily used for resetting the form control.
Type
boolean |
|
|
formform |
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you
to place the form control outside of a form and associate it with the form that has this id. The form must be in
the same document or shadow root for this to work.Type
nullDefault
null |
|
|
requiredrequired |
Makes the switch a required field.
Type
booleanDefault
false |
|
|
hinthint |
The switch's hint. If you need to display HTML, use the
hint slot instead.Type
stringDefault
'' |
||
withHintwith-hint |
Used for SSR. If you slot in hint, make sure to add
with-hint to your component to get it to properly render with SSR.Type
booleanDefault
false |
Methods Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
click() |
Simulates a click on the switch. | |
focus() |
Sets focus on the switch. |
options: FocusOptions
|
blur() |
Removes focus from the switch. |
Events Jump to heading
Learn more about events.
| Name | Description |
|---|---|
change |
Emitted when the control's checked state changes. |
input |
Emitted when the control receives input. |
blur |
Emitted when the control loses focus. |
focus |
Emitted when the control gains focus. |
wa-invalid |
Emitted when the form control has been checked for validity and its constraints aren't satisfied. |
CSS custom properties Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--width |
The width of the switch.
|
--height |
The height of the switch.
|
--thumb-size |
The size of the thumb.
|
CSS parts Jump to heading
Learn more about CSS parts.
| Name | Description |
|---|---|
base |
The component's base wrapper. |
control |
The control that houses the switch's thumb. |
thumb |
The switch's thumb. |
label |
The switch's label. |
hint |
The hint's wrapper. |
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/components/switch/switch.js';
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/switch/switch.js';
To manually import this component from React, use the following code.
import '@awesome.me/webawesome/dist/react/switch';