Input Group
An input with attached boxes: text like https:// or .com, icons, a Button or a Select on either side. One border, one radius, one focus ring.
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from "pleate/input-group";Text, icon, button and select
https://.com
per person
Sizes and invalid
Promo
Promo
Promo
Promo
Props
- variant
Same looks as Input.
"filled" | "outline" | "surface" | "plain"default "filled"- size
Height, padding and type size.
"sm" | "md" | "lg"default "md"- invalid
Red edge and aria-invalid on the group.
boolean- InputGroupAddon bare
Drops the tinted well, for a plain icon.
boolean- InputGroupButton
A Button flush with the edge; defaults to the plain variant, sized to the group.
ButtonProps- inputGroupSlot
className for a SelectTrigger (variant plain) or any custom child so it sits flush with a divider.
string
Accessibility
- The group has role=group; name each input with a label or aria-label.
- Addon text is decorative context: repeat it in the input's label if it matters ("Price in euro").
- Icon-only buttons need an aria-label.