111k
新建

Input

PreviousNext

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

Radix UIBase 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 组件。更多示例请参见 Input Group 组件。

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

按钮组

要给输入框添加按钮，请使用 ButtonGroup 组件。更多示例请参见 Button Group 组件。

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"