Switch
Switches are boolean inputs that can be toggled on or off.
Usage
import { Switch } from "#/ui/components/Switch"<Switch label="Switch" hideLabel />Size
The switch comes in 3 different sizes
sm
md
lg
<Switch
size="sm" // sm, md, lg
>
sm
</Switch>Labels
You can pass a label directly to the switch, which will automatically be associated with that switch. (be careful not to use the same label twice)
<Switch label="Switch" />You can hide this label by passing the hideLabel prop
<Switch label="Hidden" hideLabel />Or you can create your own labels anywhere in your app (note if id is used, an id will not be generated from the label)
Try toggling this switch
<div className="border w-full max-w-2xl p-6 flex justify-between items-center gap-16 rounded-lg">
<div>
<label htmlFor="label-anywhere" className="font-semibold mb-0">
Some form component
</label>
<p>Try toggling this switch</p>
</div>
<Switch id="label-anywhere" />
</div>When used this way, you’ll need to do additional state management to make the switch work in the way you need.
Additional detail
You can optionally pass additional detail that is displayed under the label. This does not work without a label
Toggle the lights
<Switch label="Dark Mode Example" detail="Toggle the lights" />Reverse
You can reverse the order of the label and switch by passing the reverse prop
<Switch label="Reversed" reverse />Customisation
Classes
You can customize individual buttons by passing a className prop. If this clashes with the default styles, the className will take precedence.
<Switch label="Custom" className="flex flex-col" />Due to how tailwind-merge works, you won’t need to worry about conflicting styles when using the className prop.