输入

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add input
Copy

用法

🌐 Usage

Copyimport { Input } from "@/components/ui/input"

Copy<Input />

示例

🌐 Examples

基础

🌐 Basic

import { Input } from "@/components/ui/input"

export function InputBasic() {

字段

🌐 Field

使用 Field、FieldLabel 和 FieldDescription 创建一个带有标签和描述的输入。

🌐 Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

字段组

🌐 Field Group

使用 FieldGroup 来显示多个 Field 块并构建表单。

🌐 Use FieldGroup to show multiple Field blocks and to build forms.

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

已禁用

🌐 Disabled

使用 disabled 属性来禁用输入。要为禁用状态设置样式，请在 Field 组件上添加 data-disabled 属性。

🌐 Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

无效

🌐 Invalid

使用 aria-invalid 属性将输入标记为无效。要设置无效状态的样式，请将 data-invalid 属性添加到 Field 组件。

🌐 Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

文件

🌐 File

使用 type="file" 属性来创建一个文件输入。

🌐 Use the type="file" prop to create a file input.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

内联

🌐 Inline

使用 Field 和 orientation="horizontal" 来创建内联输入。与 Button 配合使用可以创建带按钮的搜索输入。

🌐 Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

网格

🌐 Grid

使用网格布局将多个输入框并排放置。

🌐 Use a grid layout to place multiple inputs side by side.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

必填

🌐 Required

使用 required 属性来表示必填输入。

🌐 Use the required attribute to indicate required inputs.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

徽章

🌐 Badge

在标签中使用 Badge 来高亮推荐字段。

🌐 Use Badge in the label to highlight a recommended field.

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

输入组

🌐 Input Group

要在输入框内添加图标、文本或按钮，请使用 InputGroup 组件。有关更多示例，请参见 Input Group 组件。

🌐 To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

import { Field, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,

按钮组

🌐 Button Group

要向输入框添加按钮，请使用 ButtonGroup 组件。有关更多示例，请参见 按钮组 组件。

🌐 To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

表单

🌐 Form

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

🌐 A full form example with multiple inputs, a select, and a button.

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

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"