Preview

Usage

<cs-toggle>Dark mode</cs-toggle>
<cs-toggle checked>Notifications</cs-toggle>
<cs-toggle description="Enable email alerts.">Email alerts</cs-toggle>

Properties

aria-controlsstring

Adds aria-controls attribute to the component. If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.

aria-labelstring default: null

Adds an aria-label to the native control.

Use this if you don't have a visible label for this control.

checkedbooleanrequired

Specifies if the component is selected.

control-idstring

Specifies the ID of the native form element. By default, it uses an automatically generated ID.

disabledboolean

Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. A disabled control can't receive focus.

namestring

Specifies the name of the control used in HTML forms.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value. Should be used only inside forms. A read-only control is still focusable. If both readOnly and disabled are set, disabled takes precedence.

Slots

default

The control's label that's displayed next to the toggle. Clicking this will invoke a state change.

description

Description that appears below the label.

Events

blurCustomEvent<void>

Called when input focus is removed from the UI control.

changeCustomEvent<ToggleProps.ChangeDetail>

focusCustomEvent<void>

Called when input focus is moved to the UI control.