Switch

Switches are UI elements that let users choose between two states—most commonly on/off.

Introduction

The Switch component provides users with a switch for toggling between two mutually exclusive states.

Component

import { Switch } from '@base_ui/react/Switch';

Anatomy

The Switch component is composed of a root that houses one interior slot—a thumb:

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

Custom structure

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

<Switch render={(props) => <MyFancySwitchRoot {...props} />}>
  <Switch.Thumb render={(props) => <MyFancySwitchThumb {...props} />} />
</Switch>

Hook

import { useSwitch } from '@base_ui/react/useSwitch';

The useSwitch hook lets you apply the functionality of a Switch to a fully custom component. It returns props to be placed on the custom component, along with fields representing the component's internal state.

Accessibility

To make the Switch component accessible, you should ensure that the corresponding labels reflect the Switch's current state.