Foundations
IntroductionInput Group
A layout wrapper designed to encapsulate inputs, icons, and buttons under a unified glass capsule.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/input-group.jsonUsage
An input group featuring a leading search icon and a trailing action button.
Best practices
The best practices when using input groups.
- Place primary search action
Button components inside the trailing addon slot for consistent alignment. - Limit the number of icons or action buttons inside a single input group to avoid clutter.
- Ensure the placeholder text explains the scope of the search or action clearly.
- Keep the container aligned nicely on responsive screen width changes.
Components & Props
Input Group sub-components and customization parameters.
| Component / Prop | Type / Role | Default | Description |
|---|---|---|---|
| InputGroup.Root | Capsule container | - | Orchestrates border reflections, scale responses, and mouse interactions. |
| InputGroup.Input | Text input | - | The inner input field which blends borderless inside the capsule outline. |
| InputGroup.Addon | Addon section | - | Section for leading/trailing elements. Takes `align="inline-start" | "inline-end"`. |
| InputGroup.Button | Internal action button | - | Tailing action button specifically sized to fit inside the capsule boundary. |
| specular | boolean | true | Enables 3D border reflection glare overlays on hover. |
| magnetic | boolean | true | Attracts the capsule center towards the cursor upon pointer hover. |
| scale | boolean | true | Compresses capsule boundaries elastically when pressed. |