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.

<Toggle checked />

<Toggle />

Colors

The toggle component supports different colors for active states.

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

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

Disabled

The toggle component can be disabled to prevent user interaction.

<Toggle checked disabled />

<Toggle disabled />

With labels

You can add a label next to the toggle component.

Dark mode

Notifications

<Toggle label="Dark mode" />

<Toggle checked label="Notifications" />

Usage

The Toggle component can be controlled by passing an onChange function to handle the state. The Toggle component can be referenced using the following format:

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

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