104Get started
HextaUI

Switch: iOS

variant="ios" uses a taller track, a capsule thumb and green when on. Press, drag and saving work the same.

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

export function SwitchIos() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch variant="ios" />
        Airplane mode
      </label>
      <label className="flex items-center gap-3">
        <Switch variant="ios" defaultChecked />
        Wi-Fi
      </label>
      <div className="flex items-center gap-4">
        <Switch variant="ios" size="sm" aria-label="Small" defaultChecked />
        <Switch variant="ios" size="lg" aria-label="Large" defaultChecked />
      </div>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/switch-ios.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
variant
"default" | "ios""default"
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