Components
Input Group
A grouped input layout for URLs, inline actions, and fields with structured leading or trailing content.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add input-group to your project.
watermelon add input-group2
Import the component
Import Input Group from your local UI registry output.
Import
import { InputGroup } from "@/components/ui/input-group";Import
Import
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
} from "@/components/ui/input-group";Usage
Use input groups when an input needs supporting structure like prefixes, suffixes, or inline actions.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| children | ReactNode | - | Compose addons, controls, and action buttons inside one grouped field. |