109k
新建

输入框

上一页下一页

一种用于表单和用户数据输入的文本输入组件，内置样式和辅助功能特性。

Radix UIBase UI
Radix UI - shadcn/ui 组件库

您的 API 密钥已加密并安全存储。

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)

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

为您的账户选择一个唯一的用户名。

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

字段组 (Field Group)

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

我们将向此地址发送更新。

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

禁用

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

此字段当前已禁用。

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

无效状态

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

此字段包含验证错误。

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

文件上传

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

选择要上传的图片。

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

内联

将 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 属性来标示必填输入项。

此字段必须填写。

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"

表单

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

我们绝不会与任何人分享您的电子邮件。

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

RTL (从右至左)

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

您的 API 密钥已加密并安全存储。

"use client"

import * as React from "react"