HextaUI

Toggle: Disabled

A disabled toggle keeps showing whether it's on, but can't be pressed or focused.

import { IconBold, IconUnderline } from "@tabler/icons-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Toggle disabled aria-label="Bold">
        <IconBold />
      </Toggle>
      <Toggle disabled defaultPressed aria-label="Underline">
        <IconUnderline />
      </Toggle>
      <Toggle disabled variant="outline">
        Read-only mode
      </Toggle>
    </div>
  )
}

This adds the example as components/examples/toggle/disabled.tsx, together with the Toggle component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle-disabled.json

To add only the component, follow the Toggle installation.

Props in this example

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

PropTypeDefault
variant
"default" | "outline""default"
defaultPressed
booleanfalse
disabled
booleanfalse

Every prop is in the Toggle API reference.

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