Toggle
The Toggle component is a streamlined interface element that enables users to swiftly switch between two states, such as on/off or enabled/disabled. It's especially valuable in settings and preference panels for toggling features or modes with a simple click.
Examples
Basic Usage
This basic example demonstrates a toggle that users can interact with to switch states. It's a fundamental illustration of the Toggle component's functionality:
Advanced Customization
Toggle Size Variations
Showcase the Toggle component in different sizes—small, medium, and large—to accommodate various design requirements and enhance interface flexibility:
Disabled Toggle State
Illustrates a Toggle component in a disabled state, which is non-interactive and signifies an option that is temporarily unavailable:
Theme Customization
The Toggle component is designed with a default theme that can be customized to match your application's aesthetic:
- root{}(6 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
Tailor the Toggle component's functionality with a suite of configurable properties:
| Prop | Description | Default |
|---|---|---|
checked * | Whether the toggle is checked or not.boolean | |
disabled | Whether the toggle is disabled or not.boolean | |
className | Additional class names to apply to the toggle.string | |
size | The size of the toggle.string | medium |
onChange | When the toggle is changed.(value: boolean) => void | |
onBlur | When the toggle was blurred.(event: FocusEvent<HTMLDivElement, Element>) => void | |
theme | Theme for the Toggle.ToggleTheme | |
ref | Reference to the toggle element.LegacyRef<HTMLDivElement> |
Design and Usability Tips
- Clear State Indication: Design the Toggle with distinct colors or icons for each state (on/off) to clarify its current status at a glance. This immediate visual feedback is crucial for intuitive interaction.
- Accessible Labeling: While the Toggle inherently suggests binary choices, pairing it with accessible, descriptive labels ensures that all users, including those using screen readers, understand the context and implications of the toggle state.