Free Astro Components

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

Toggle Switch

States

The component supports different states to indicate whether it is checked or unchecked.

Switch unchecked Switch checked Switch unchecked disabled Switch checked disabled

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

<Switch label="Switch unchecked" />
<Switch label="Switch checked" checked />
<Switch label="Switch unchecked disabled" disabled />
<Switch label="Switch checked disabled" checked disabled />

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 and aria-disabled for the disabled state.
Labeling: Ensure that each switch has a label associated with it for screen readers.