Get Started

    Components

      Overview

      The Switch component is a user interface element that allows users to toggle between two states, typically representing an "on" or "off" choice. It is commonly used in settings and preferences where users can enable or disable features. The switch can be styled to fit various design needs and can include labels for clarity.

      State

      The Switch component can be in one of the following states:

      • Default: The switch is in its default state, ready for user interaction.
      • Disabled: The switch is not interactive, indicating that the option is not available for selection.

      API Reference

      Switch

      A toggle switch component for binary on/off choices.

      Props

      NameTypeDefaultDescription
      checkedbooleanundefinedWhether the switch is checked (for controlled components)

      Inherited Props

      The Switch component accepts all standard HTML input[type="checkbox"] element props.

      Notes

      • The switch renders as an input with role="switch" for proper accessibility
      • The component includes visual checkmark indicator when enabled
      • Use the checked prop for controlled components or defaultChecked for uncontrolled components