Thành phần

Input group

One form line with a control plus text, icons or buttons either side, split by ink hairlines.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Archive link

https://

Readers can open the edition from this address.

Install

bash

npx shadcn add @eloquent/input-group

It installs @eloquent/input, @eloquent/textarea and @eloquent/button with it.

Usage

tsx

import { Field, FieldLabel } from "@/components/ui/field";
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "@/components/ui/input-group";

<Field>
  <FieldLabel>Archive link</FieldLabel>
  <InputGroup>
    <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
    <InputGroupInput placeholder="archive.example.org/edition" />
    <InputGroupAddon align="inline-end">
      <InputGroupButton size="icon" aria-label="Copy link"><CopyIcon aria-hidden="true" /></InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</Field>

InputGroupAddon takes align: inline-start (default), inline-end, block-start or block-end. Use InputGroupTextarea for a multi-line control with a block addon.

States

12 results

Handle

Enter a handle.

Edition

No.

Letter

0 / 280

State	Treatment
Default	One 1px ink bottom rule; addons split from the control by 1px ink hairlines
Hover	No change on the group; buttons inside follow Button
Focus	The group draws a 2px ink outline with a 2px offset around the focused control
Invalid	2px ink bottom rule; `Field` adds the ink ! icon and message
Disabled	Halftone rule and addon text, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move through the control and any buttons in DOM order (disabled controls are skipped)
Enter / Space	Activate a focused `InputGroupButton`
Click on addon text	Focuses the control

Vietnamese

Liên kết lưu trữ

https://

Bạn đọc có thể mở số báo từ địa chỉ này.

Ink adaptation

Upstream shadcn's rounded box, shadow and focus ring glow are removed. The control draws no rule or outline of its own, so the group draws both once. Addons are split by hairlines instead of filled panels. InputGroupButton sizes are sm and icon only, because the smaller upstream sizes fall under the 44px hit target.