3.0.0-alpha.9 Alpha
Components

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>

Hint

Add descriptive hint to a switch with the hint attribute. For hints that contain HTML, use the hint slot instead.

Label 
<wa-switch hint="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

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

Learn more about attributes and 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
value
The value of the switch, submitted as a name/value pair with form data.
Type string | null
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.
Type boolean
defaultChecked
checked
The default value of the form control. Primarily used for resetting the form control.
Type boolean
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
hint
hint
The switch's hint. If you need to display HTML, use the hint slot instead.
Type string
Default ''
withHint
with-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 boolean
Default false

Methods

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

Learn more about 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

Learn more about 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

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

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.9/dist/components/switch/switch.js';
 Coming soon! Coming soon!
    No results