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:

---
import { Switch } from 'free-astro-components'
---

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

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 and aria-disabled for the disabled state.

  • Labeling: Ensure that each switch has a label associated with it for screen readers.