All components (204)

Input group

Fields · InputGroup

What it is and when to use it

A field with segments stuck to it: https:// + the domain + .com, an amount with its currency in front, a code with its copy button behind. It is a single box -one border, one focus ring, one error- with the field in the middle and each segment with its own background, separated by a rule.

When to use it

When what surrounds the field is part of what is typed but not of the value: a prefix, a unit, an action that operates on it.
For a button that acts on the field (copy, paste, generate) and must look like part of it.

When not to

For an ornament inside the field (a magnifier, a small unit): that is front or back of TextField.
For two independent controls that touch: that is CompactGroup.
For a chat box: that is PromptInput.

Keyboard: it is a single field; Tab goes from the segment with a button to the field and back, in the order they are seen. Pressing the label focuses the field.

Accessibility: it carries everything TextField does: the label is required, the hint and the error are linked with aria-describedby and the error marks the field as invalid. value is only what is typed: the segments are not mixed into it. A text segment is content of the box and is read with it; if what is inside is a button, it needs its own name.

Fine-tuning: CSS variable --amset-inputgroup-addon-background (the background of the segments), besides the --amset-field-* of the box.

What it looks like

Your shop address

https://.tienda.example

Lowercase letters, numbers and hyphens only.

Price

€VAT incl.

<InputGroup
  label="Your shop address"
  start="https://"
  end=".tienda.example"
  placeholder="aurelia-jewellery"
  hint="Lowercase letters, numbers and hyphens only."
/>
<InputGroup label="Price" start="€" end="VAT incl." placeholder="0,00" numeric />

Props

Import it with import { InputGroup } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Required: a field without a visible label does not get into the library.
`className`	`string`	—
`defaultValue`	`string`	—
`disabled`	`boolean`	—
`end`	`ReactNode`	A segment AFTER the field: ".com", "kg", a copy button.
`error`	`string`	Error message. When it is passed, the field is marked as invalid.
`hiddenLabel`	`boolean`	The label for the screen reader only. For when the field sits inside something that already explains itself (a table cell, a group of filters), never to save space.
`hint`	`string`	Permanent hint text below the field. It does not replace the label.
`inputRef`	`Ref<HTMLInputElement>`	The real `<input>`, to focus it, select its text or measure it from outside. It is separate from `ref` because the component paints a box with label, hint and error, and whoever asks for a ref almost always wants the control.
`invalid`	`boolean`	—
`numeric`	`boolean`	Fixed-width digits (amounts, tax IDs, dates).
`onChange`	`(value: string) => void`	—
`onChangeEvent`	`(event: ChangeEvent<HTMLInputElement>) => void`	Like `onChange`, but with the native event of the `<input>`: `e.target.value`, `e.currentTarget`... It exists to migrate a front end that already writes its handlers with the event (AMS-735). If you only want the text, `onChange` already gives it to you.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`start`	`ReactNode`	A segment BEFORE the field, with its own background and divider: "https://", a currency, a selector. It is part of the box and its focus ring, but not of the text: `value` is only what is typed.
`validationBehavior`	`"aria" \| "native"`	`aria` (the default) announces the state without the browser interrupting submission with its bubble; `native` also adds its own validation.
`value`	`string`	—
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: