Field
Field wraps an input control with its label, required marker, hint and validation message.
Field generates an id, links the label to the control and sets aria-describedby / aria-invalid. Pass an element (Textarea, Select…) or, for controls that don't take an id directly, a render prop (props) => <Control {...props} />.
Up to 200 characters.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Field } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
This domain is already taken.
Strong password.
Validation
validationState error / warning / success with a validationMessage that shows an icon.
Horizontal
Label on the left, control on the right. Use it for wide settings forms.
You can change this at any time.
Render-prop
For controls that need to receive props their own way (RadioGroup, custom components…).
Usage
Do
- Put every input control in a Field (or give it its own label).
- Make validationMessage say how to fix the error.
Don't
- Don't use a placeholder in place of a label.
- Don't nest a Field inside a Field.
Props
| Prop · Type | Default | Description |
|---|---|---|
| labelReactNode | Default: — | Label, linked to the control through htmlFor. |
| requiredboolean | Default: — | Shows a red * and passes required down to the control. |
| hintReactNode | Default: — | Hint below the control. |
| validationState"none" | "error" | "warning" | "success" | Default: "none" | Validation state. |
| validationMessageReactNode | Default: — | Message with a status icon. |
| orientation"vertical" | "horizontal" | Default: "vertical" | Label layout. |
| size"small" | "medium" | "large" | Default: "medium" | Label size. |
| childrenReactElement | (props) => ReactNode | Default: — | The control, or a render prop that receives id and aria-* props. |