8
Components

Toggle

A versatile and accessible toggle component for controlling on/off states, built with Radix UI primitives.

Previews with Code

Example 1: Default Toggle

Default Toggle

Installation

The Toggle component is a lightweight and accessible control for toggling between on/off states.

Quickly add the component using:

npx axionjs-ui add toggle

File Structure

toggle.tsx

Props

The Toggle component supports the following props:

PropTypeDefault
pressed
boolean
-
onPressedChange
(pressed: boolean) => void
-
size
"default" | "sm" | "lg"
"default"
variant
"default" | "outline"
"default"
className
string
-

Features

The Toggle component includes the following features:

  • Customizable Sizes and Variants:
    • Supports sm, default, and lg sizes, as well as default and outline variants.
  • Icon Support:
    • Add icons for additional visual cues.
  • Accessible:
    • Keyboard and screen-reader-friendly design.
  • Responsive Design:
    • Adapts to various container sizes seamlessly.

Accessibility

The Toggle component is built with accessibility in mind:

  • Keyboard Navigation:
    • Use the Space key to toggle the state.
  • Screen Reader Support:
    • Proper aria-pressed attributes announce the toggle state.
  • Focusable States:
    • Uses focus-visible styles for better interaction visibility.

Conclusion

The Toggle component is a lightweight, customizable, and accessible solution for managing on/off states in modern web applications. Its flexibility makes it ideal for feature toggles, formatting options, and more.

Previous

Textarea

Next

Toggle Group

On this page