Shadcn 表单

# 表单与输入 ## 内容 - 表单使用 FieldGroup + Field - InputGroup 需要 InputGroupInput/InputGroupTextarea - 输入框内的按钮使用 InputGroup + InputGroupAddon - 选项集 (2–7 个选项) 使用 ToggleGroup - FieldSet + FieldLegend 用于对相关字段进行分组 - 字段验证与禁用状态 --- ## 表单使用 FieldGroup + Field 始终使用 `FieldGroup` + `Field` — 切勿使用带有 `space-y-*` 的原始 `div`： tsx Email Password 在设置页面中使用 `Field orientation="horizontal"`。对于视觉隐藏的标签，使用 `FieldLabel className="sr-only"`。 **选择表单控件：** - 简单文本输入 → `Input` - 预定义选项的下拉菜单 → `Select` - 可搜索下拉菜单 → `Combobox` - 原生 HTML select (无 JS) → `native-select` - 布尔开关 → `Switch` (用于设置) 或 `Checkbox` (用于表单) - 少量选项中的单选 → `RadioGroup` - 2–5 个选项之间的切换 → `ToggleGroup` + `ToggleGroupItem` - OTP/验证码 → `InputOTP` - 多行文本 → `Textarea` --- ## InputGroup 需要 InputGroupInput/InputGroupTextarea 切勿在 `InputGroup` 内使用原始的 `Input` 或 `Textarea`。 **错误：** tsx **正确：** tsx import { InputGroup, InputGroupInput } from "@/components/ui/input-group" --- ## 输入框内的按钮使用 InputGroup + InputGroupAddon 切勿将 `Button` 直接放置在 `Input` 内部或通过自定义定位放置在旁边。 **错误：** tsx **正确：** tsx import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group" --- ## 选项集 (2–7 个选项) 使用 ToggleGroup 不要手动循环带有激活状态的 `Button` 组件。 **错误：** tsx const [selected, setSelected] = useState("dai