Switch

The Switch component is used for toggling between two or more options, such as switching between monthly and annual pricing breakdowns.

Default

By default, the Switch component includes two options with equal width.

import Switch from "../../components/Switch";

<Switch options={["Monthly", "Annually"]} />

The Switch component can include more than two options.

<Switch options={["Text", "Audio", "Video"]} />

The Switch component is available in three sizes: small, medium, and large.

<Switch options={["Small", "Large"]} size="sm" />

<Switch options={["Small", "Large"]} size="md" />

<Switch options={["Small", "Large"]} size="lg" />

The active button can be customized with different background and text colors.

<Switch options={["Dark", "Light"]} activeBgColor="bg-gray-900" activeTextColor="text-white" />

<Switch options={["Blue", "White"]} activeBgColor="bg-blue-500" activeTextColor="text-white" />

The Switch component can expand to fill its container.

<Switch options={["Option 1", "Option 2"]} fullWidth />

The Switch component can be disabled to prevent user interaction.

<Switch options={["Option 1", "Option 2"]} disabled />

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

<Switch options={["On", "Off"]} onChange={(value) => console.log(value)} />