# InputGroup primitives (/components/primitives/input-group)
Use these primitives to build a custom text control. Reach for them when you need the styled input
without label, description, or error slots. For most application forms, use
[`TextField`](/components/forms/text-field).
apps/docs/src/examples/input-group-primitive/basic.tsx
```tsx
import {
InputGroup,
InputGroupInput,
InputGroupPrefix,
InputGroupSuffix,
} from '@luke-ui/react/primitives/input-group';
export default () => {
return (
$
USD
);
};
```
## Anatomy [#anatomy]
`InputGroup` owns the border, background, shadow, and rounding. Its parts are transparent flex
children, so position follows document order. Put `InputGroupPrefix` before `InputGroupInput` and
`InputGroupSuffix` after it.
```tsx
$
USD
```
A prefix or suffix accepts any React node, including an interactive one such as a button. Give an
interactive part an accessible name, keyboard behaviour, and a considered focus order.
## Size [#size]
Set `size` on `InputGroup` and the parts inherit it. `medium` is the default. Use `small` when the
input belongs in a compact control group. Match the size of nearby fields and actions. An individual
part can override the inherited size.
The group also sets the icon size for everything inside it, so an `Icon` in a prefix or suffix
scales with the control without a `size` of its own.
## Validation [#validation]
`InputGroup` reads its invalid state from the enclosing React Aria field, or from an explicit
`isInvalid`. While invalid it renders an error icon after the input value and before any
`InputGroupSuffix`.
The icon is decorative and hidden from assistive technology, so it marks a problem but does not
describe it. Always give an invalid composition an error message. See
[Validation](/docs/validation).
## Styling and composition [#styling-and-composition]
`className` on `InputGroup` applies to the group element, and `className` on `InputGroupInput`
applies to the input. Use these hooks when you compose the primitive with other controls. Give a
standalone `InputGroupInput` an accessible name with `aria-label` or a connected label.
## API [#api]
### InputGroupProps [#inputgroupprops]
### InputGroupInputProps [#inputgroupinputprops]
### InputGroupPrefixProps [#inputgroupprefixprops]
### InputGroupSuffixProps [#inputgroupsuffixprops]