120k
New

输入框

PreviousNext

用于表单和用户数据输入的文本输入组件，内置样式和可访问性功能。

Base UIReact AriaRadix UI

Your API key is encrypted and stored securely.

import {
  Field,
  FieldDescription,

安装

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,

字段组

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

We'll send updates to this address.

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

禁用

使用 disabled 属性禁用输入框。要设置禁用状态的样式，请将 data-disabled 属性添加到 Field 组件。

This field is currently disabled.

import {
  Field,
  FieldDescription,

无效

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

This field contains validation errors.

import {
  Field,
  FieldDescription,

文件

使用 type="file" 属性创建文件输入框。

Select a picture to upload.

import {
  Field,
  FieldDescription,

内联

使用 Field 和 orientation="horizontal" 创建内联输入框。
与 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,

徽章

在标签中使用 Badge，以突出显示推荐字段。

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

输入组

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

https://
import { InfoIcon } from "lucide-react"

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

按钮组

要将按钮添加到输入框中，请使用 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,

RTL

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

مفتاح API الخاص بك مشفر ومخزن بأمان.

"use client"

import * as React from "react"