Input Group

用于将输入、图标、单位或操作按钮放在同一个表面内。

预览

搜索、网址与消息组合

比较带图标和按钮的搜索、网址前缀，以及带发送按钮的多行消息输入。

搜索

网站

https://

消息

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/input-group

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

搜索、网址与消息组合

npx shadcn@latest add @neumorphism-ui/input-group @neumorphism-ui/label

Registry JSON

用法

将 InputGroupInput 或 InputGroupTextarea 与所需的附加内容和按钮组合。为实际输入提供标签，非提交按钮设置为 type button。

"use client";

import { useId } from "react";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Amount in US dollars</Label>
      <InputGroup>
        <InputGroupAddon aria-hidden="true">$</InputGroupAddon>
        <InputGroupInput id={id} name="amount" inputMode="decimal" placeholder="0.00" />
      </InputGroup>
    </div>
  );
}

API 参考

可在 InputGroupInput 或 InputGroupTextarea 前后组合 addon、辅助文本和 button。根元素的 focus-within 状态为整个组合提供统一的焦点表现。

组件	属性	类型	默认值	说明
`InputGroup`	`children`必填	`React.ReactNode`	`—`	按顺序排列 control、addon、text 和 button。
`InputGroup`	`aria-label / aria-labelledby`	`string`	`—`	在需要时为 role=group 提供整个组合的名称。
`InputGroupInput`	`native input props`	`React.ComponentProps<"input">`	`—`	id、name、type、value、onChange 等原生属性。
`InputGroupTextarea`	`native textarea props`	`React.ComponentProps<"textarea">`	`—`	多行 control 的原生属性。
`InputGroupButton`	`type`	`"button" \| "submit" \| "reset"`	`"button"`	设置组合内操作按钮的类型。

预览

搜索、网址与消息组合

安装

用法

API 参考

无障碍