表单组件

切换按钮

具有两种状态（激活/未激活）的切换按钮，支持 default 和 outline 两种变体，以及 sm、default、lg 三种尺寸。

安装

bash

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

默认

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>
  )
}

变体

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>
  )
}

尺寸

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"`	按钮的视觉变体。
`size`	`"default" \| "sm" \| "lg"`	`"default"`	按钮尺寸。
`pressed`	`boolean`	`—`	受控激活状态。
`onPressedChange`	`(pressed: boolean) => void`	`—`	激活状态变化回调。
`defaultPressed`	`boolean`	`false`	非受控初始激活状态。
`disabled`	`boolean`	`false`	禁用切换交互。