A reusable toggle switch component built on Radix UI primitives with custom styling and accessibility features.
## Key Components
- **Switch**: Main component that renders a toggle switch with a sliding thumb indicator
- Built on `@radix-ui/react-switch` for accessibility and keyboard navigation
- Styled with responsive design tokens and smooth transitions
- Supports disabled states and focus management
## Usage Example
```typescript
import { Switch } from "./components/ui/switch"
function SettingsPanel() {
const [isEnabled, setIsEnabled] = React.useState(false)
return (
)
}
// Disabled state
// Custom styling
```
The component automatically handles:
- Checked/unchecked visual states with `data-[state]` attributes
- Smooth thumb animations via CSS transforms
- Focus ring styling for keyboard navigation
- Proper ARIA attributes for screen readers