Field API
Field wraps form controls with labels, hints, validation state, and Foundry spacing.
Preview components
Open the component docs to see examples, combinations, and usage patterns built on top of this API.
- FieldInput, textarea, select, labels, hints, and validation examples.
Preview
Used for build output.
Keep it short.
Passed validation.
Import
import { Field, Input, Select, Textarea } from "@axonyx/react";Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | undefined | Field label shown above the control. |
| hint | ReactNode | undefined | Secondary helper text. |
| error | ReactNode | undefined | Error text. Also sets error state. |
| state | "default" | "error" | "success" | "warning" | undefined | Explicit visual state. |
| htmlFor | string | auto | Optional explicit label target. Falls back to child control id when available. |
| Prop | Type | Default | Description |
|---|---|---|---|
| uiSize | "sm" | "md" | "lg" | "md" | Shared control size for Input, Textarea, and Select. |
| leadingIcon | ReactNode | undefined | Leading icon slot for Input and Select. |
| trailingIcon | ReactNode | undefined | Trailing icon slot for Input. |
| invalid | boolean | false | Marks Input or Select as invalid without relying on parent Field state. |
| surface | "default" | "forged" | "default" | Available on Select for heavier admin or command-style surfaces. |
CSS contract
.ax-field .ax-field__label .ax-field__hint .ax-field__error .ax-control .ax-control__icon .ax-input .ax-select .ax-textarea [data-state]