Input Group

Display additional information or actions to an input or textarea.

https://

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/input-group.json

Usage

Use an input group to attach text, icons, or actions to a field.

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

export function Example() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <InputGroupText>https://</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput placeholder="example.com" />
    </InputGroup>
  );
}

Align addons with align: inline-start, inline-end, block-start, or block-end. Use InputGroupButton for controls and InputGroupTextarea for multi-line fields.