🏗️ ⏐ Components


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.


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.


Tailor the Toggle component's functionality with a suite of configurable properties:

checked *Whether the toggle is checked or not.
disabledWhether the toggle is disabled or not.
classNameAdditional class names to apply to the toggle.
sizeThe size of the toggle.
onChangeWhen the toggle is changed.
(value: boolean) => void
onBlurWhen the toggle was blurred.
(event: FocusEvent<HTMLDivElement, Element>) => void
themeTheme for the Toggle.
refReference to the toggle element.

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.