Toggle

Usage
A toggle element is a good way to capture boolean values from user input. The usage follows the traditional input checkbox form element. Adding a size="sm" attribute will give you a compact version of the element.

Use it like a checkbox

<sc-toggle label="Toggle" name="test1" value="1"></sc-toggle>

Add checked attribute to set predefined state

<sc-toggle label="Toggle" name="test2" value="2" checked="checked"></sc-toggle>

Add a size="sm" attribute to make it more compact

<sc-toggle label="Toggle small" name="test3" value="3" size="sm"></sc-toggle>
Props
Name
Description
Type
Default
NameariaLabelledby
Description

aria labelby

Typestring
Default''
Nameautofocus
Description

This Boolean attribute lets you specify that a form control should have input focus when the page loads.

Typeboolean
Defaultfalse
Namechecked
Description

If this toggle is on by default

Typeboolean
Defaultfalse
Namedisabled
Description

If true, the user cannot interact with the input.

Typeboolean
Defaultfalse
Namelabel
Description

Label text to be displayed inline with the toggle

Typestring
Default
Namename
Description

The name of the control, which is submitted with the form data.

Typestring
Default''
Namesize
Description

Size of toggle

Type"lg" | "sm"
Default'lg'
Namevalue
Description

The value of the input.

Typestring
Default''
Events
Event
Description
Event detail
EventblurEvent
Description

Emitted when the input loses focus.

Event detailvoid
EventchangeEvent
Description

Emitted when the value has changed.

Event detailany
EventfocusEvent
Description

Emitted when the input has focus.

Event detailvoid
EventinputEvent
Description

Emitted when a keyboard input occurred.

Event detailKeyboardEvent
EventkeyDownEvent
Description

Emitted when a key is pressed down

Event detailKeyboardEvent

Comments

Leave your thoughts here and it becomes a GitHub issue! Thanks to the magic of Utterances