FormComponent

Field layout wrapper: renders a Label above a control, plus an optional helper/error line below it.

When to use

Use FormComponent to give any control the standard label + helper/error layout. It is presentational only — it does not register a field, hold a value, or wire up react-hook-form. The @uxf/ui field components (text-input, textarea, file-input, combobox, multi-select, …) render it internally; reach for it directly when building a custom labelled field.

There is no @uxf/form/form-component twin.

Usage

import { FormComponent } from "@uxf/ui/form-component";

// label + helper text
<FormComponent helperText="We'll never share it." inputId="email" label="Email" name="email">
    <input id="email" />
</FormComponent>

// error state: errorId marks the helper text invalid
<FormComponent errorId="email--error" helperText="Required" inputId="email" isRequired label="Email" name="email">
    <input id="email" />
</FormComponent>

The wrapped control's id should match inputId so the label's htmlFor targets it.

Props

Prop	Type	Default	Description
`inputId`	`string`	—	Required. `htmlFor` of the label; match the wrapped control's `id`.
`name`	`string`	—	Required. Field name; rendered as `data-name` on the root.
`label`	`ReactNode`	—	Label content.
`children`	`ReactElement`	—	The control to wrap.
`helperText`	`ReactNode`	—	Helper or error text shown below the control (only rendered when set).
`errorId`	`string`	—	When set, renders the helper text with the invalid style and gives it this `id`, so the control can reference it (e.g. `aria-describedby`).
`isRequired`	`boolean`	`false`	Marks the label as required.
`hiddenLabel`	`boolean`	`false`	Visually hides the label (still accessible).
`form`	`string`	—	Associates the label with a form by id.
`data-component`	`string`	—	Sets `data-component` on the root.
`className`	`string`	—	Extra class on the root `<div>`.

FormComponent forwards its ref to the root HTMLDivElement.

Variants & states

Invalid: set errorId together with helperText — the helper line gets the is-invalid class (error color).
Required: set isRequired to mark the label.
Hidden label: set hiddenLabel to hide the label visually while keeping it for assistive tech.

Requirements

Import the component stylesheet and the label stylesheet once in your global CSS:

@import url("@uxf/ui/css/form-component.css");
@import url("@uxf/ui/css/label.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Default

Open in new tab

When to use

There is no @uxf/form/form-component twin.

Usage

import { FormComponent } from "@uxf/ui/form-component";

// label + helper text
<FormComponent helperText="We'll never share it." inputId="email" label="Email" name="email">
    <input id="email" />
</FormComponent>

// error state: errorId marks the helper text invalid
<FormComponent errorId="email--error" helperText="Required" inputId="email" isRequired label="Email" name="email">
    <input id="email" />
</FormComponent>

The wrapped control's id should match inputId so the label's htmlFor targets it.

Props

Prop

Type

Default

Description

inputId

string

—

Required. htmlFor of the label; match the wrapped control's id.

name

string

—

Required. Field name; rendered as data-name on the root.

label

ReactNode

—

Label content.

children

ReactElement

—

The control to wrap.

helperText

ReactNode

—

Helper or error text shown below the control (only rendered when set).

errorId

string

—

When set, renders the helper text with the invalid style and gives it this id, so the control can reference it (e.g. aria-describedby).

isRequired

boolean

false

Marks the label as required.

hiddenLabel

boolean

false

Visually hides the label (still accessible).

form

string

—

Associates the label with a form by id.

data-component

string

—

Sets data-component on the root.

className

string

—

Extra class on the root <div>.

FormComponent forwards its ref to the root HTMLDivElement.