InputGroup

Composes bare InputGroupInput controls with InputGroupText addons for prefixed or suffixed fields. Owns its own field chrome rather than wrapping TextField / NumberInput.

Examples

Default

Place an InputGroupText addon before (or after) an InputGroupInput inside the group.

import { InputGroup, InputGroupInput, InputGroupText } from '@var-ui/react';

<InputGroup label="Price">
  <InputGroupText>$</InputGroupText>
  <InputGroupInput aria-label="Price" />
</InputGroup>

Prefix and suffix addons

Stack multiple InputGroupText children on either side of the input so borders join into one control.

import { InputGroup, InputGroupInput, InputGroupText } from '@var-ui/react';

<InputGroup label="Website">
  <InputGroupText>https://</InputGroupText>
  <InputGroupInput aria-label="Website" placeholder="example" />
  <InputGroupText>.com</InputGroupText>
</InputGroup>

Props

Accessibility

The outer control uses role="group" with aria-labelledby pointing at the visible label. Give each InputGroupInput its own accessible name (aria-label or aria-labelledby) — addon text is visual chrome and is not announced as the input’s name. errorMessage is exposed with role="alert".