A layout wrapper component that adds an optional label above and a status message below any form field, handling the visual chrome (label + feedback text) while letting the field itself remain unstyled. ## Key Components ### `FieldWrapper` A `forwardRef` component that wraps form fields with consistent label and feedback message rendering. **Props (`FieldWrapperProps`)** | Prop | Type | Default | Description | |------|------|---------|-------------| | `label` | `string` | — | Label text rendered above the field | | `error` | `string` | — | Status/feedback message rendered below the field (out of flow) | | `errorVariant` | `"error" \| "warning" \| "success" \| "muted"` | `"error"` | Color variant for the feedback message | | `className` | `string` | — | Additional class applied to the outer wrapper | | `children` | `React.ReactNode` | — | The field element(s) to wrap | **Behavior:** - When neither `label` nor `error` is present, the wrapper renders as `contents` (no layout box introduced). - When either exists, it renders as a full-width **relative** flex column. - The feedback message is a single line, ellipsized on overflow; the full text is accessible via the native `title` tooltip. - The message is positioned **absolutely** (`bottom-0` + `translate-y-full`), so showing or hiding it never changes the field's height — no layout shift on validation. The trade-off: it hangs BELOW the wrapper box and overlaps whatever follows, so a form stacking fields must leave at least ~20px of vertical gap (e.g. `gap-[var(--spacing-system-lf)]`) for it to land in clear space. `CheckboxBlock` uses the same treatment. **Color Variants:** | Variant | Color token | |---------|------------| | `error` | `text-ods-error` | | `warning` | `text-ods-warning` | | `success` | `text-ods-success` | | `muted` | `text-ods-text-secondary` | ## Usage Example ```typescript import { FieldWrapper } from "@openframe-oss-lib/components" // Basic usage with label and error feedback // Success state after validation // Passthrough — no wrapper box introduced in the DOM ``` > **Source:** [`field-wrapper.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/field-wrapper.tsx)