Permits users to select from two opposing options
Switch is a system-wide control that is used to quickly change between two possible states. This component is only used for binary actions that occur immediately after the user makes any changes.
Default switch with medium size and standard spacing.
Displays at full-width of its container.
Size can be changed to large based on where the component is being used.
A label with custom styling.
To ensure that usage of this component complies with accessibility guidelines:
idto the label of the switch
This component complies with WCAG guidelines by:
idof the switch label by using the
roleof the switch button element to
Switches, checkboxes, radio buttons, and toggle buttons are all similar types of selection controls, but are generally not interchangeable. If you're not sure which one to use for a certain scenario, here's a table that might help.
|Radio Button||Checkbox||Single Checkbox||Switch||Toggle Button|
|Selections available||At least two||At least one||Just one||Only two (on or off)||At least two (this or that)|
|Choices||Mutually exclusive||Independent of each other||Mutually exclusive||Mutually exclusive||Mutually exclusive|
|Takes effect||After a user clicks a submit button||After a user clicks a submit button||After a user clicks a submit button||Immediately||Immediately|
Id for the CdrSwitch element. Required for accessibility.
Find more information about using Slots in the article Installing Cedar.
Slot for CdrSwitch label.
$emit event fired when the switch is toggled.