# Core/InputRow - Design

## Overview

`InputRow` is a horizontal container that visually merges one primary input with optional prefix and
suffix segments so the whole group reads as a single control. Use it for URLs, currency amounts, units, fixed
labels (for example `https://` or `.com`), and similar patterns where the value only makes
sense together with its neighbors.

## `InputRow`

### Role and labeling

The root is a `div` laid out as a flex row. When you pass `aria-label` or `aria-labelledby`, the row defaults to `role="group"` so assistive technologies can treat
the children as one related set. Give the row a short name that describes the combined value (for example
“Web address” or “Price”).

Order children left-to-right: leading segment, primary field, trailing segment. Capra field wrappers use `display: contents` when they are **direct** children of the row, so the inner input
participates in the flex layout and border-joining rules; keep fields and addons as immediate children of `InputRow`.

### Visual treatment

Only the outer corners of the group use the standard field radius; shared edges between segments stay square
so borders overlap cleanly instead of doubling. Adjacent borders are collapsed with a small negative margin;
the segment that contains focus is raised in the stacking order so its focus ring stays visible.

## `InputRow.Addon`

### Static segments

`InputRow.Addon` is for **non-editable** content: fixed text, symbols, or decorative
icons. String children are rendered with the typography `Text` component; pass arbitrary nodes for
icons or richer content.

Addons are flex-shrink-safe strips with a muted surface and field-aligned borders so they match `TextInput` height and baseline. Place one or more addons before and/or after the field; the
primary input should remain the flexible segment in the middle when you have both sides.

### Size

The `size` prop on `InputRow.Addon` (`md` by default, or `sm`)
controls minimum height and typography so the addon lines up with an adjacent `TextField` or `NumberField` using the same `size`.

## Composing with Capra `*Field` components

### Which fields to use

`TextField` and `NumberField` are the usual primary controls inside a row. Other Capra
field roots that expose `data-capra-field-root` (for example `AutocompleteField`, `DatePicker`, or `DateRangePicker`) use the same layout hook: the wrapper does not create
an extra flex box, so the inner control can share borders with addons like a plain `TextInput`.

Prefer one primary editable control per row. Pair it with `InputRow.Addon` for fixed text or icons,
or with another bordered control as a leading/trailing segment when the design calls for a separate control
(for example a unit or scheme picker), keeping that control a direct child so border overlap still applies.

### Labels, helper text, and slots

Do not pass `label`, `helperText`, or `layout` props on Capra field wrappers
inside an `InputRow`. Those patterns reserve vertical space for label and helper rows and break the
single horizontal group.

Put the visible label (if any) *outside* the row—for example a standalone `Label` or
surrounding copy tied with `aria-labelledby` on `InputRow`. For validation or hints,
show helper text below the whole row, not on the nested field.

Avoid `leadingSlot` and `trailingSlot` on `TextField` when the same concern is
already expressed with `InputRow.Addon`; slots are meant for compact adornments on the input itself,
not for full row segments.

### Accessible names

When `label` is omitted on nested fields, each focusable control still needs a name: use `aria-label` or `aria-labelledby` on `TextField`, `NumberField`, or
the inner input as documented for that component. The row-level `aria-label` names the group; each
control should have its own short name (“Domain”, “Amount”, “Unit”, and so on) where several tab stops exist.

## Accessibility

### Grouping

When the row combines multiple inputs or segments that share one label, put `aria-label` or `aria-labelledby` on `InputRow` and ensure each focusable control still has a distinct
accessible name where needed.

### Addons

Treat `InputRow.Addon` as presentational unless the text is essential; decorative icons should use `aria-hidden`. If addon text conveys meaning not duplicated elsewhere, leave it in the accessibility
tree.