104Get started
HextaUI

Switch: Sizes

sm, default and lg.

import { Switch } from "@/components/ui/switch"

export function SwitchSizes() {
  return (
    <div className="flex items-center gap-6">
      <Switch size="sm" aria-label="Small" defaultChecked />
      <Switch aria-label="Default" defaultChecked />
      <Switch size="lg" aria-label="Large" defaultChecked />
    </div>
  )
}

Add this example

This adds the example as components/examples/switch/sizes.tsx, together with the Switch component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/switch-sizes.json

To add only the component, follow the Switch installation.

Props in this example

The Switch props this example sets, from the API reference.

Switch

PropTypeDefault
defaultChecked
booleanfalse
size
"sm" | "default" | "lg""default"

Every prop is in the Switch API reference.

More Switch examples

See them all, with keyboard support and accessibility notes, on the Switch page.

Related components