介绍

开始使用

表单

注册表

输入组

为输入框添加附加内容、按钮和辅助内容。

12 results

import {
  InputGroup,
  InputGroupAddon,

安装


pnpm dlx shadcn@latest add input-group

使用方法

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"

<InputGroup>
  <InputGroupInput placeholder="搜索..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

对齐

使用 InputGroupAddon 上的 align 属性来相对于输入框定位附加内容。

为了正确管理焦点，InputGroupAddon 应始终位于 DOM 中的 InputGroupInput 或 InputGroupTextarea 之后。使用 align 属性进行视觉位置调整。

inline-start

使用 align="inline-start" 将附加内容放置在输入框的起始位置。这是默认值。

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

inline-end

使用 align="inline-end" 将附加内容放置在输入框的末尾。

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

block-start

使用 align="block-start" 将附加内容放置在输入框上方。

import {
  Field,
  FieldDescription,

block-end

使用 align="block-end" 将附加内容放置在输入框下方。

import {
  Field,
  FieldDescription,

示例

图标

import {
  InputGroup,
  InputGroupAddon,

文本

USD

https://

.com

@company.com

120 characters left

import {
  InputGroup,
  InputGroupAddon,

按钮

https://

"use client"

import * as React from "react"

快捷键

⌘K

import {
  InputGroup,
  InputGroupAddon,

下拉菜单

"use client"

import {

加载动画

Saving...

Please wait...

import {
  InputGroup,
  InputGroupAddon,

多行文本框

Line 1, Column 1

script.js

import {
  InputGroup,
  InputGroupAddon,

自定义输入框

为您的自定义输入框添加 data-slot="input-group-control" 属性以实现自动焦点状态管理。

以下是一个来自第三方库的可调整大小的自定义多行文本框示例。

"use client"

import {

API 参考

InputGroup

包裹输入框和附加内容的主组件。

属性	类型	默认值
`className`	`string`

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

在输入框旁显示图标、文本、按钮或其他内容。

焦点导航

为了正确管理焦点导航，InputGroupAddon 组件应放置在输入框之后。使用
align 属性定位附加内容。

属性	类型	默认值
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`
`className`	`string`

<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

对于 <InputGroupInput />，使用 inline-start 或 inline-end 对齐方式。对于 <InputGroupTextarea />，使用 block-start 或 block-end 对齐方式。

InputGroupAddon 组件可以包含多个 InputGroupButton 组件和图标。

<InputGroupAddon>
  <InputGroupButton>按钮</InputGroupButton>
  <InputGroupButton>按钮</InputGroupButton>
</InputGroupAddon>

InputGroupButton

在输入组中显示按钮。

属性	类型	默认值
`size`	`"xs" \| "icon-xs" \| "sm" \| "icon-sm"`	`"xs"`
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"ghost"`
`className`	`string`

<InputGroupButton>按钮</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="复制">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

构建输入组时替代 <Input />。该组件预置了输入组样式，并使用统一的 data-slot="input-group-control" 处理焦点状态。

属性	类型	默认值
`className`	`string`

其他所有属性均会传递给底层的 <Input /> 组件。

<InputGroup>
  <InputGroupInput placeholder="输入文本..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

构建输入组时替代 <Textarea />。该组件预置了多行文本框组样式，并使用统一的 data-slot="input-group-control" 处理焦点状态。

属性	类型	默认值
`className`	`string`

其他所有属性均会传递给底层的 <Textarea /> 组件。

<InputGroup>
  <InputGroupTextarea placeholder="输入消息..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>发送</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

输入框输入 OTP