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.
<Switch options={["Monthly", "Annually"]} />Several options
The Switch component can include more than two options.
<Switch options={["Text", "Audio", "Video"]} />Sizes
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" />Colors
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" />Full width
The Switch component can expand to fill its container.
<Switch options={["Option 1", "Option 2"]} fullWidth />Disabled
The Switch component can be disabled to prevent user interaction.
<Switch options={["Option 1", "Option 2"]} disabled />Usage
To respond to user interaction, pass an onChange function to the Switch component. The Switch component can be referenced using the following format:
import Switch from "../../components/Switch";<Switch options={["On", "Off"]} onChange={(value) => console.log(value)} />