Input Group @astryx-svelte/core v0.3.0 · 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
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 | Use InputGroup with compatible single-line inputs: TextInput, NumberInput, TimeInput, DateInput, Typeahead, Selector, and MultiSelector. |
| Do | 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. |
| 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. |
| Don't | Don't use InputGroup with TextArea, Slider, Switch, CheckboxInput, or RadioList. |
Examples
Common configurations, variations, and states.InputGroup — Basic
A currency field with static prefix and suffix addons around a TextInput. Use InputGroupText to clarify units or input format.