Preview loads on approachPreview loads on approach
Exact source · input-group-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {useState} from 'react';
import {InputGroup, InputGroupText} from '@astryxdesign/core/InputGroup';
import {TextInput} from '@astryxdesign/core/TextInput';
import {Stack} from '@astryxdesign/core/Layout';
export default function InputGroupShowcase() {
const [price, setPrice] = useState('');
const [url, setUrl] = useState('');
return (
<Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
<InputGroup label="Price">
<InputGroupText>$</InputGroupText>
<TextInput
label="Amount"
isLabelHidden
value={price}
onChange={setPrice}
placeholder="0.00"
/>
</InputGroup>
<InputGroup label="Website">
<InputGroupText>https://</InputGroupText>
<TextInput
label="URL"
isLabelHidden
value={url}
onChange={setUrl}
placeholder="example"
/>
<InputGroupText>.com</InputGroupText>
</InputGroup>
</Stack>
);
}
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.
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://".
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 put multiple text inputs in one group; use separate fields instead.
Don't use InputGroup for unrelated inputs; it's for a single input with decorations.
