Switch
The switch component allows users to toggle between two states, such as on and off. It supports various configurations and customization options.
Import
To use the switch component, first import it into your project:
Usage
Here’s how you can use the switch component in your Astro project:
Basic Usage
States
The component supports different states to indicate whether it is checked or unchecked.
Props
Attribute | Type | Description | Default |
---|---|---|---|
label | string | The text label associated with the switch. | - |
checked | boolean | Whether the switch is in the checked state. | false |
disabled | boolean | Whether the switch is disabled. | false |
class | string | CSS class for custom styling. | - |
other | any | Any other props will be passed to the checkbox element. | - |
Accessibility
-
Keyboard Accessibility: Ensure that the switch can be toggled using keyboard interactions (e.g., Space key).
-
ARIA Attributes: Use
aria-checked
to indicate the state of the switch andaria-disabled
for the disabled state. -
Labeling: Ensure that each switch has a label associated with it for screen readers.