Components / Composition
Input group
A field with an addon or an action attached to it.
@fabrials/ui
https://
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { InputGroup, InputGroupAddon, InputGroupInput } from "@fabrials/ui";Or install it under shadcn's name, so code that imports
@/components/ui/input-groupgets this control. See shims.npx shadcn@latest add @fabrials/input-group
API reference
| Prop / export | Type | Description |
|---|---|---|
children | ReactNode | Addon and the input. |
Behavior
The input still has its own accessible name. The addon is not a placeholder.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.