Field

Provides a consistent way to render form fields with labels, helper text, and error messages.

Usage

Wrap form elements like Input, Textarea, or Select to provide additional context like labels and status messages.

import { Field } from "@elemnts-ui/react";

<Field.Root>
  <Field.Label>Username</Field.Label>
  <Field.Input placeholder="Enter your username" />
  <Field.HelperText>Choose a unique public name.</Field.HelperText>
</Field.Root>;

Helper Text

Use Field.HelperText to provide additional information or instructions for the user.

Invalid

Set the invalid prop on Field.Root to show the Field.ErrorText. This will also update the styling of the input to reflect the error state.

Disabled

Use the disabled prop on Field.Root to disable the entire field. This will also apply the disabled styling to all child components, such as the label and input.

API Reference

FieldRoot

The root component for the Field.

Prop	Type	Default
asChild	`boolean`	`false`
disabled	`boolean`	`false`
ids	`ElementIds`	-
invalid	`boolean`	`false`
readOnly	`boolean`	`false`
required	`boolean`	`false`
target	`string`	-

FieldProvider

Provides the field context created with useField.

Prop	Type	Default
value	`UseFieldReturn`	required
asChild	`boolean`	`false`

FieldLabel

The label for the field.

Prop	Type	Default
asChild	`boolean`	`false`

FieldInput

The input control for the field.

Prop	Type	Default
asChild	`boolean`	`false`

FieldTextarea

The textarea control for the field.

Prop	Type	Default
asChild	`boolean`	`false`
autoresize	`boolean`	`false`

FieldSelect

The select control for the field.

Prop	Type	Default
asChild	`boolean`	`false`

FieldHelperText

Additional information or instructions for the field.

Prop	Type	Default
asChild	`boolean`	`false`

FieldErrorText

The error message for an invalid field.

Prop	Type	Default
asChild	`boolean`	`false`

FieldRequiredIndicator

The indicator that shows the field is required.

Prop	Type	Default
asChild	`boolean`	`false`
fallback	`ReactNode`	-