Toggle

The toggle component is used for switching between two states, such as enabling or disabling a setting, such as browser notifications.

Default

By default, the toggle component has an inactive (gray) and active (blue) state.

import Toggle from "../../components/Toggle";

<Toggle checked />

The toggle component supports different colors for active states.

<Toggle checked color={{ active: "outline-gray-900" }} dotColor={{ active: "bg-gray-900 border-gray-900" }} />

<Toggle checked color={{ active: "outline-pink-600" }} dotColor={{ active: "bg-pink-600 border-pink-600" }} />

The toggle component can be disabled to prevent user interaction.

<Toggle checked disabled />

<Toggle disabled />

You can add a label next to the toggle component.

Dark mode

Notifications

<Toggle label="Dark mode" />

<Toggle checked label="Notifications" />

The toggle component can be controlled by passing an onChange function to handle the state.

<Toggle onChange={(value) => console.log(value)} />