Field
canonWrapper that stacks label, control, hint and error message.
acrm MR !4085 (28 Sep 2026, "fix(ui): chyba pod DS Field se čtečce provází sama") added a new export, `useFieldDescribedBy`: `<Field>` now gives the rendered hint/error span an automatic `id` (`useId()`, error takes precedence over hint) and provides that id through a context. Any control rendered as a child of `<Field>`/`<DrawerField>` can call `useFieldDescribedBy()` and fall back to it for `aria-describedby` unless the caller passed an explicit `describedBy` — `masked-input` and `phone-input` both do this now. This does not add `htmlFor`/label association (the pre-existing known limit in `field.a11y.md` — no automatic label–control link), and it only helps a control that explicitly opts into the hook; a plain `<input>` still needs it wired by hand.
Used in 29 files · 15 areas · 214× — components/accounting, components/callwrapup, components/clen-tymu, components/datamart, components/mail, components/person …
@acrm/ui <Field>.acrm-field .acrm-field-label .acrm-field-hint .acrm-field-error +1SourceStoryLegacy card Inputs.htmlImport
import { Field } from '@acrm/ui'Props
Field packages/ui/src/components/Field.tsx
| Name | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | — |
labelExtra | ReactNode | — | Inline doplněk labelu (ikonka/nápověda vpravo od textu) — vzor DrawerField. |
hint | ReactNode | — | Nápověda pod polem (span.acrm-field-hint). |
error | ReactNode | — | Chybová hláška pod polem (span.acrm-field-error); potlačí hint. |
className | string | — | — |
style | CSSProperties | — | — |
children * | ReactNode | — | — |