Switch

Switch is a UI element that let users choose between two states.

Installation

Base UI components are all available as a single package.

Once you have the package installed, import the component.

import * as Switch from '@base_ui/react/Switch';

Anatomy

Switch is composed of two components:

• <Switch.Root /> renders a <button>.
• <Switch.Thumb /> renders a <span> for providing a visual indicator.

<Switch.Root>
  <Switch.Thumb />
</Switch.Root>

Overriding default components

Use the render prop to override the root or thumb component:

<Switch.Root render={(props) => <MyCustomSwitch {...props} />}>
  <Switch.Thumb render={(props) => <MyCustomThumb {...props} />} />
</Switch.Root>

Accessibility

Ensure the Switch has an accessible name via a <label> element.

<Switch.Root id="my-switch">
  <Switch.Thumb />
</Switch.Root>
<label htmlFor="my-switch">
  My label
</label>