Astryx Design System

Input Group@astryxdesign/core v0.0.15 · InputGroup

Usage

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.

ts
import {InputGroup} from '@astryxdesign/core/InputGroup'

Best practices

Guidance	Practices
Do	Use text addons to show units, prefixes, or suffixes that clarify the input format (e.g., "$", "kg", "https://").
Do	Use InputGroupText for static prefixes/suffixes like "$", "kg", or "https://".
Do	Set isLabelHidden on the inner input and let the group label be visible.
Don't	Don't put multiple text inputs in one group; use separate fields instead.
Don't	Don't use InputGroup for unrelated inputs; it's for a single input with decorations.