表单与选择@neumorphism-ui/input-group

Input Group

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

@neumorphism-ui/input-group

Registry JSON

预览

搜索

网站

https://

消息

安装

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

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

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

Import

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

Example

<div className="grid gap-2">
  <Label htmlFor="workspace">工作区</Label>
  <InputGroup>
    <InputGroupAddon aria-hidden="true"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg></InputGroupAddon>
    <InputGroupInput id="workspace" defaultValue="soft-interface" />
    <InputGroupButton type="button">搜索</InputGroupButton>
  </InputGroup>
</div>

API 参考

组件	属性	类型	默认值	说明
`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"`	设置组合内操作按钮的类型。

预览

安装

用法

Import

Example

API 参考

无障碍