106k
New

输入

PreviousNext

用于表单和用户数据输入的文本输入组件，内置样式和无障碍功能。

Radix UIBase UI
Radix UI

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"

表单

包含多个输入、选择框和按钮的完整表单示例。

We'll never share your email with anyone.

import { Button } from "@/components/ui/button"
import {
  Field,