Toggle

Toggle switch

Demo

API

Tag

Name	Description
`<s-toggle>`	Custom HTML element, no content

Attributes

Name	Value	Description
`disabled`	Boolean attribute	Disables the toggle
`checked`	Boolean attribute	Sets the toggle to checked state
`checkedlabel`	String attribute	Sets label for when the toggle is on
`uncheckedlabel`	String attribute	Sets label for when the toggle is off

Properties

Name	Value	Description
`disabled`	Boolean attribute	Disables the toggle
`checked`	Boolean attribute	Sets the toggle to checked state
`checkedLabel`	String attribute	Sets label for when the toggle is on
`uncheckedLabel`	String attribute	Sets label for when the toggle is off

Events

Name	Detail	Description
`s-toggle`	The toggle's state (`true` if checked) is available in `e.detail.checked`, and its ID is available in `e.detail.id`	Fired when the toggle state is changed via user interaction

Demo

API

Tag

Name
`<SToggle>`

Props

Name	Value	Description
`disabled`	Boolean attribute	Disables the toggle
`checked`	Boolean attribute	Sets the toggle to checked state
`checkedLabel`	String attribute	Sets label for when the toggle is on
`uncheckedLabel`	String attribute	Sets label for when the toggle is off
`onS-toggle`	Function	Handles the `s-toggle` event fired when the toggle state is changed via user interaction. The toggle's state (`true` if checked) is available in `e.detail.checked`, and its ID is available in `e.detail.id`.

Skylab React links

General information about using our React package

Guidelines

Accessibility

The toggle needs a descriptive label; set its aria-label or aria-labelledby attribute (aria-labelledby would be set to the id of the span acting as the toggle's label).

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com