Field
Form field container wrapping label, control, error, and helper text.
We'll never share your email
Contract
Section titled “Contract”Overview
Machine-readable contract from Component Spec.
component: fieldexport: Fieldversion: 1attributes: data-refineui=field
Anatomy
| Part | data-refineui |
|---|---|
| root | field |
| error | field-error |
| hint | field-hint |
Variants
| Axis | Values |
|---|---|
| size | sm, md, lg |
Accessibility
| Slot | Element | Role |
|---|---|---|
| field-error | div | alert |
Layout
| Property | Value |
|---|---|
| direction | logical |
| rtl | true |
Installation
Section titled “Installation”npm install @refineui/react @refineui/tokensyarn add @refineui/react @refineui/tokenspnpm add @refineui/react @refineui/tokensbun add @refineui/react @refineui/tokensimport { Field, FieldLabel, FieldHint, FieldError, FieldRequired, Input } from "@refineui/react";
<Field size="md"> <FieldLabel>Email address</FieldLabel> <Input type="email" placeholder="you@example.com" /> <FieldHint>We'll never share your email.</FieldHint></Field>
<Field size="lg"> <FieldLabel>Password <FieldRequired /></FieldLabel> <Input type="password" error={hasError} /> {hasError && <FieldError>Password is required</FieldError>}</Field>API Reference
Section titled “API Reference”| Prop | Default | Type | Description |
|---|---|---|---|
| size | "md" | "sm" | "md" | "lg" | Field size tier (affects label and messages). |
FieldLabel
Section titled “FieldLabel”Label element for the field. Accepts size prop (defaults from Field context).
FieldRequired
Section titled “FieldRequired”Visual required indicator (asterisk).
FieldHint
Section titled “FieldHint”Helper text below the input.
FieldError
Section titled “FieldError”Error message below the input.