InputGroup

InputGroup connects an input with prefix/suffix addons in a single visual unit. Use it for URL fields, currency inputs, search fields with action buttons, or any input that needs contextual decorations.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Input Group

Prop	Type	Default	Description
children *	ReactNode		InputGroupText, Button addons, and compatible input children: TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector, or MultiSelector.
label *	string		Accessible label for the group.
isLabelHidden	boolean	false	Visually hide the label.
description	string		Helper text between label and input group.
isDisabled	boolean	false	Disable the entire group.
isOptional	boolean	false	Show "(optional)" indicator.
isRequired	boolean	false	Mark the field as required.
size	'sm' \| 'md' \| 'lg'	'md'	Default size for inputs in the group.
status	{type: 'warning' \| 'error' \| 'success', message?: string}		Status indicator applied to the group border.
labelTooltip	string		Tooltip text at the end of the label.
xstyle	StyleXStyles		StyleX styles for layout customization.
data-testid	string		Test selector.

Usage guidance

Use text addons to show units, prefixes, or suffixes that clarify the input format (e.g., "$", "kg", "https://").
Use InputGroupText for static prefixes/suffixes like "$", "kg", or "https://".
Use Button for an action attached to the input; InputGroup connects its corners automatically.
Use InputGroup with compatible single-line inputs: TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector, and MultiSelector.
Keep each inner input's label specific; grouped inputs automatically combine the group label with their own label and inherit the group description/status context.
Avoid: Don't put multiple text inputs in one group; use separate fields instead.
Avoid: Don't use InputGroup for unrelated inputs; it's for a single input with decorations.
Avoid: Don't use InputGroup with TextArea, Slider, Switch, CheckboxInput, or RadioList.

Theming API

{
  "targets": [
    {
      "className": "astryx-input-group",
      "visualProps": [
        "size",
        "status"
      ]
    },
    {
      "className": "astryx-input-group-text"
    }
  ]
}

InputGroupText

Anatomy

Label: Text above the group.
Prefix addon: Content before the input (text, icon, or button).
Input: The main input element (TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector, or MultiSelector).
Suffix addon: Content after the input (text, icon, or button).
Status message: An error, warning, or success message below the group.

Input Group Text

A prefix or suffix text element rendered inside InputGroup. Displays text or icons.

Prop	Type	Description
children *	ReactNode	Text or icon content.
xstyle	StyleXStyles	StyleX styles for customization.
className	string	CSS class name(s).
style	React.CSSProperties	Inline styles.

Examples

Input Group:
InputGroup — Basic: A currency field with static prefix and suffix addons around a TextInput. Use InputGroupText to clarify units or input format.