Components
Your API key is encrypted and stored securely.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
安装
pnpm dlx shadcn@latest add input
使用
import { Input } from "@/components/ui/input"<Input />示例
基础
import { Input } from "@/components/ui/input"
export function InputBasic() {字段
使用 Field、FieldLabel 和 FieldDescription 创建带标签和描述的输入框。
Choose a unique username for your account.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
字段组
使用 FieldGroup 展示多个 Field 块，构建表单。
We'll send updates to this address.
import { Button } from "@/components/ui/button"
import {
Field,禁用
使用 disabled 属性禁用输入框。要为禁用状态添加样式，请给 Field 组件添加 data-disabled 属性。
This field is currently disabled.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
无效
使用 aria-invalid 属性标记输入框为无效状态。要为无效状态添加样式，请给 Field 组件添加 data-invalid 属性。
This field contains validation errors.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
文件
使用 type="file" 属性创建文件输入框。
Select a picture to upload.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
内联
使用带有 orientation="horizontal" 的 Field 创建内联输入框。
配合 Button 创建带按钮的搜索输入框。
import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"网格
使用网格布局将多个输入框并排放置。
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
必填
使用 required 属性标明必填输入框。
This field must be filled out.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
标签徽章
在标签中使用 Badge 突出显示推荐字段。
import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"输入组
要在输入框内添加图标、文字或按钮，请使用 InputGroup 组件。更多示例请参见 输入组 组件。
https://
import { Field, FieldLabel } from "@/components/ui/field"
import {
InputGroup,按钮组
要向输入框添加按钮，请使用 ButtonGroup 组件。更多示例请参见 按钮组 组件。
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"表单
一个包含多个输入框、选择框和按钮的完整表单示例。
import { Button } from "@/components/ui/button"
import {
Field,