Form

Toggle

A two-state toggle button (pressed/unpressed) with default and outline variants, and sm, default, lg sizes.

Installation

bash

pnpm dlx shadcn@latest add toggle -c packages/react

Default

tsx

import { Toggle } from "@polyui/react/toggle"
export function ToggleDefault() {
  return (
    <div className="flex gap-2">
      <Toggle>B</Toggle>
      <Toggle>I</Toggle>
      <Toggle>U</Toggle>
    </div>
  )
}

Variants

tsx

import { Toggle } from "@polyui/react/toggle"
export function ToggleVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Toggle variant="default">Default</Toggle>
      <Toggle variant="outline">Outline</Toggle>
    </div>
  )
}

Sizes

tsx

import { Toggle } from "@polyui/react/toggle"
export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle size="sm">Small</Toggle>
      <Toggle size="default">Default</Toggle>
      <Toggle size="lg">Large</Toggle>
    </div>
  )
}

Props

属性	类型	默认值	说明
`variant`	`"default" \| "outline"`	`"default"`	Visual variant of the toggle.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Toggle size.
`pressed`	`boolean`	`—`	Controlled pressed state.
`onPressedChange`	`(pressed: boolean) => void`	`—`	Callback when pressed state changes.
`defaultPressed`	`boolean`	`false`	Uncontrolled initial pressed state.
`disabled`	`boolean`	`false`	Disable toggle interaction.