zzzUI
English

Input group

将 Input 的输入槽拆分开来：输入框两端可放置任意数量的附加项，如文字、图标、按键或小按钮。

安装

terminal
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/input-group

示例

单位与按钮，图标与按键

cr
/
input-group-reward.tsx
import { SearchIcon } from "@/components/zero/icons";import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupInput,  InputGroupText,} from "@/components/zero/input-group";import { Kbd } from "@/components/zero/kbd";export default function InputGroupReward() {  return (    <div className="grid w-full max-w-sm gap-4">      <InputGroup>        <InputGroupAddon>          <InputGroupText>cr</InputGroupText>        </InputGroupAddon>        <InputGroupInput          placeholder="Minimum reward"          aria-label="Minimum reward"          inputMode="numeric"        />        <InputGroupAddon align="end">          <InputGroupButton>Max</InputGroupButton>        </InputGroupAddon>      </InputGroup>      <InputGroup>        <InputGroupAddon>          <SearchIcon />        </InputGroupAddon>        <InputGroupInput placeholder="Search jobs" aria-label="Search jobs" />        <InputGroupAddon align="end">          <Kbd>/</Kbd>        </InputGroupAddon>      </InputGroup>    </div>  );}

行为

输入槽的表现与 Input 一致：焦点框、校验失败时的描边、禁用时的填充。禁用时的填充只取决于输入框本身：发送按钮在未输入内容时处于禁用状态，不会改变输入槽的外观。放置附加项的一端，该侧的内边距改由附加项提供。若只需一个图标或一个操作，使用 Input 自带的 start 与 end 更简洁。

属性

InputGroup

属性类型默认值说明
size"sm" | "md" | "lg""md"与 Input 相同的高度档位。
cut"end" | "start" | "both" | "none""end"斜切哪一侧。

InputGroupAddon

属性类型默认值说明
align"start" | "end""start"位于哪一端。

InputGroupInput, InputGroupText, InputGroupButton