3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Switch

<wa-switch> Since 2.0 stable

Switches allow the user to toggle an option on or off.

Switch 
<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

Checked

Use the checked attribute to activate the switch.

Checked 
<wa-switch checked>Checked</wa-switch>

Disabled

Use the disabled attribute to disable the switch.

Disabled 
<wa-switch disabled>Disabled</wa-switch>

Sizes

Use the size attribute to change a switch's size.

Small
Medium
Large 
<wa-switch size="small">Small</wa-switch>
<br />
<wa-switch size="medium">Medium</wa-switch>
<br />
<wa-switch size="large">Large</wa-switch>

Help Text

Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

Label 
<wa-switch help-text="What should the user know about the switch?">Label</wa-switch>

Custom Styles

Use the available custom properties to change how the switch is styled.

Really big 
<wa-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</wa-switch>

Slots

Name Description
(default) The switch's label.
help-text Text that describes how to use the switch. Alternatively, you can use the help-text attribute.

Properties

Name Description Reflects
name
name
The name of the switch, submitted as a name/value pair with form data.
Type string | null
Default null
value
The current value of the switch, submitted as a name/value pair with form data.
defaultValue
value
The default value of the form control. Primarily used for resetting the form control.
Type null | string
size
size
The switch's size.
Type 'small' | 'medium' | 'large'
Default 'medium'
disabled
disabled
Disables the switch.
Type boolean
Default false
checked
Draws the switch in a checked state.
defaultChecked
checked
The default value of the form control. Primarily used for resetting the form control.
form
form
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 null
Default null
required
required
Makes the switch a required field.
Type boolean
Default false
helpText
help-text
The switch's help text. If you need to display HTML, use the help-text slot instead.
Type string
Default ''
withHelpText
with-help-text
Used for SSR. If you slot in help-text, make sure to add with-help-text to your component to get it to properly render with SSR.
Type boolean
Default false

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

Name Description
wa-blur Emitted when the control loses focus.
wa-change Emitted when the control's checked state changes.
wa-input Emitted when the control receives input.
wa-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

Name Description
--background-color
The switch's background color.
--background-color-checked
The switch's background color when checked.
--border-color
The color of the switch's borders.
--border-color-checked
The color of the switch's borders when checked.
--border-style
The style of the switch's borders.
--border-width
The width of the switch's borders. Expects a single value.
--box-shadow
The shadow effects around the edges of the switch.
--height
The height of the switch.
--thumb-color
The color of the thumb.
--thumb-color-checked
The color of the thumb when checked.
--thumb-shadow
The shadow effects around the edges of the thumb.
--thumb-size
The size of the thumb.
--width
The width of the switch.

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.
form-control-help-text The help text's wrapper.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/switch/switch.js';
 Coming soon! Coming soon!
    No results