Field
A validation-agnostic wiring layer for accessible labels, help text, errors, and shared form-control state.
Installation
tsx
import { Field, Input } from "madagent";Default
Used for account notifications
Validation states
Use a valid company address
This email address is invalid
Supported controls
Add any context the reviewer should know
Control-level shorthand
Input, Select, and Textarea still accept their own label, helperText, and errorText props. These are shorthand only — under the hood, the control wraps itself in exactly this same Field (same markup, same CSS, same accessibility wiring). Prefer composing with Field directly when a form has multiple related fields or when you need help and error shown at once. If a control already sits inside a Field, its own label/helper/error props are ignored (with a console warning in development) rather than rendering a second, nested label.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | ReactNode | - | Visible label linked to the child control |
required | boolean | false | Shows the required marker and supplies required semantics to the control |
help | ReactNode | - | Supporting text included in the control's aria-describedby references |
error | ReactNode | - | Validation message announced as an alert and reflected through aria-invalid |
disabled | boolean | false | Supplies the disabled default to the child control |
controlId | string | - | Explicit id for the child control; generated automatically when omitted |
children* | ReactElement | - | Exactly one Field-aware madagent form control |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
سنستخدمه لإشعارات الحساب
تحقق من عنوان البريد الإلكتروني
Usage
tsx
<Field
label="البريد الإلكتروني للعمل"
help="سنستخدمه لإشعارات الحساب"
error="تحقق من عنوان البريد الإلكتروني"
required
>
<Input placeholder="name@company.com" />
</Field>