Formsstable
Switch
A toggle switch component with glassmorphism variant and customizable glow effects for modern interfaces.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add switch
When to use
Use the Switch component when you need to toggle between two states (on/off, enabled/disabled). It's ideal for settings, preferences, and feature toggles where the change takes effect immediately.
The liquid glass variant is perfect for modern, premium interfaces where you want to add visual flair with glassmorphism effects and customizable glow colors.
Best practices
- Always provide a clear label describing what the switch controls
- Use the switch for binary options that take immediate effect
- For actions that require confirmation, use a button instead
- Choose glow colors that match your brand or provide semantic meaning
- Use the default variant for standard forms, liquid glass for premium UIs
- Ensure sufficient contrast in both light and dark modes
Accessibility
The Switch component is built on Radix UI primitives and includes full accessibility support:
- Keyboard navigation: Can be toggled using the Space key
- Screen readers: Properly announces state changes
- Focus management: Clear focus indicators for keyboard users
- ARIA attributes: Correct role and state attributes
Examples
Combine variants and sizes to meet your needs.
Basic usage
A simple switch with default styling.
Sizes
Switch component in different sizes.
Settings panel
Real-world example of switches in a settings interface.
Liquid Glass variant
Premium glassmorphism variant with glow effect when checked.
Custom glow colors
Customize the glow color to match your brand or provide semantic meaning.
Controlled state
Control the switch state with React state.
Disabled state
Prevent user interaction with the disabled prop.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'liquidGlass' | 'default' | The visual style variant. Use 'liquidGlass' for glassmorphism effect with glow. |
size | 'sm' | 'default' | 'lg' | 'default' | The size of the switch component. |
glowColor | string | '#ff637e' | Hex color for the glow effect (only applies to liquidGlass variant). The glow appears when the switch is checked. |
checked | boolean | — | The controlled checked state of the switch. Use with onCheckedChange. |
defaultChecked | boolean | — | The default checked state (uncontrolled). |
onCheckedChange | (checked: boolean) => void | — | Event handler called when the checked state changes. |
disabled | boolean | false | When true, prevents the user from interacting with the switch. |
required | boolean | false | When true, indicates that the user must check the switch before submitting. |
name | string | — | The name of the switch for form submission. |
value | string | 'on' | The value given as data when submitted with a name. |