Switch

A customizable and accessible switch component for toggling between states, built with Radix UI primitives.

Normal Switch

Off

Disabled Switch

Installation

The Switch component is a lightweight and accessible UI element for toggling states, with full keyboard and screen reader support.

Quickly add the component using:

npx axionjs-ui add switch

Props

The Switch component offers a simple API with the following props for customization:

Prop	Type	Default
`checked`	`boolean`	-
`onCheckedChange`	`(checked: boolean) => void`	-
`disabled`	`boolean`	`false`
`id`	`string`	-
`className`	`string`	-

Features

The Switch component is designed for flexibility and accessibility:

Accessible Design:
- Fully keyboard navigable and screen reader compatible.
Customizable Styles:
- Easily style the switch using Tailwind classes or custom CSS.
Interactive Behavior:
- Provides visual feedback for on/off states.
Lightweight and Flexible:
- Built with Radix Primitives for minimal overhead and high performance.

Use Cases

The Switch component is ideal for:

Settings Toggles:
- Enable or disable specific features in a settings menu.
Theme Switchers:
- Toggle between light and dark mode in your application.
Form Inputs:
- Use as a replacement for checkboxes in forms for better UI/UX.

Accessibility

The Switch component is built with accessibility in mind:

Keyboard Navigation:
- Use the Tab key to focus the switch and Space or Enter to toggle it.
Screen Reader Support:
- Announces the current state of the switch to assistive technologies.
Focusable States:
- Uses focus-visible styles for better visibility during interaction.

Conclusion

The Switch component is a versatile and accessible tool for toggling states in modern web applications. Its lightweight design and customizable styling make it a perfect addition to any UI.