For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
1
Sponsor

InputGroup

PreviousNext

Compose labeled fields with icons, prefixes, suffixes and addons.

Preview

Prefixes, icons and addons

https://.com

Your public website.

$USD

Validation and disabled

Enter a valid email address.

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/input-group.json

Usage

import { InputGroup, InputField } from "@/components/ui/input-group";
 
<InputGroup>
  <InputField label="Website" prefix="https://" placeholder="example.com" />
</InputGroup>;

API Reference

InputGroup accepts div props and optional size (default or compact). InputField reuses Input and accepts its props plus label, description, error, prefix, suffix, addon, icon and labelHidden. onChange is the standard input event. Base UI Field connects labels, descriptions and errors.