Component reference
InputGroup
Invite a teammate using a composed field and adjacent action.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
InputGroupButton,
Badge
} from "@pimolu/react";
function InviteForm() {
const [sent, setSent] = useState(false);
return (
<form
className="grid gap-5 min-w-0"
onSubmit={(event) => {
event.preventDefault();
setSent(true);
}}
>
<InputGroup aria-label="Invite a teammate">
<InputGroupAddon align="inline-start">@</InputGroupAddon>
<InputGroupInput
aria-label="Teammate email"
type="email"
name="email"
placeholder="teammate@company.com"
autoComplete="email"
onChange={() => setSent(false)}
required
/>
<InputGroupButton type="submit">Send invite</InputGroupButton>
</InputGroup>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Badge variant={sent ? "success" : "neutral"}>
{sent ? "Invite queued" : "No invite sent"}
</Badge>
<span className="text-sm text-muted leading-relaxed">
The button uses type="submit" here because the form owns the
action.
</span>
</div>
</form>
);
}
export function DemoExample() {
return (<InviteForm />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Addons
Static prefixes and suffixes on either inline edge.
Buttons
InputGroupButton defaults to type=button so it never submits a surrounding form by accident.
Sizes
Sizes only set the shared height, padding and font size; every child follows.
Usage
Keep the input's form semantics intact when adding prefixes, suffixes or buttons.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluInputGroupProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Addons, inputs and buttons composing the field. |
orientation | PimoluInputGroupOrientation | undefined | "horizontal" | Layout direction. Defaults to "horizontal". |
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined | "md" | Height and typography scale shared by the group. Defaults to "md". |
disabled | boolean | undefined | false | Disables the input and every InputGroupButton of the group. |
invalid | boolean | undefined | false | Marks the group and its input as invalid. |
fullWidth | boolean | undefined | false | Stretch the group to the width of its container. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenReactNodeNo default extracted.
Addons, inputs and buttons composing the field.
orientationPimoluInputGroupOrientation | undefinedDefault: "horizontal"
Layout direction. Defaults to "horizontal".
size"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefinedDefault: "md"
Height and typography scale shared by the group. Defaults to "md".
disabledboolean | undefinedDefault: false
Disables the input and every InputGroupButton of the group.
invalidboolean | undefinedDefault: false
Marks the group and its input as invalid.
fullWidthboolean | undefinedDefault: false
Stretch the group to the width of its container.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluInputGroupAddonProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
align | PimoluInputGroupAddonAlign | undefined | "inline-start" | Edge the addon belongs to. It controls the separator and outer radii. Defaults to "inline-start". |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLSpanElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLSpanElement> | undefined | — | Standard React/HTML attribute. |
alignPimoluInputGroupAddonAlign | undefinedDefault: "inline-start"
Edge the addon belongs to. It controls the separator and outer radii. Defaults to "inline-start".
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLSpanElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLSpanElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluInputGroupTextProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLSpanElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLSpanElement> | undefined | — | Standard React/HTML attribute. |
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLSpanElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLSpanElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluInputGroupButtonProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
type | "submit" | "reset" | "button" | undefined | "button" | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLButtonElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | — | Standard React/HTML attribute. |
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
type"submit" | "reset" | "button" | undefinedDefault: "button"
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLButtonElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLButtonElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluInputGroupInputProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | — | Standard React/HTML attribute. |
type | HTMLInputTypeAttribute | undefined | "button" | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedNo default extracted.
Standard React/HTML attribute.
typeHTMLInputTypeAttribute | undefinedDefault: "button"
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Associate the input label and give adjacent icon actions independent names.