Components
HeroUI Switch
HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.
"use client"
import { Switch } from "@/components/ui/heroui-switch"
export default function RenderProps() {
return (
<Switch>
{({ isSelected }) => (
<Switch.Content>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
{isSelected ? "Enabled" : "Disabled"}
</Switch.Content>
)}
</Switch>
)
}
More examples
DefaultOpen page →
DisabledOpen page →
Default SelectedOpen page →
SizesOpen page →
Label PositionOpen page →
With IconsOpen page →
With DescriptionOpen page →
GroupOpen page →
Custom StylesOpen page →
