Field
Label, description and error around any control — ids, aria-describedby and aria-invalid are wired for you.
2 files · 127 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/field.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs fieldUsage
import { Field } from "@/components/opus/ui/field";
<Field label="Email" description="We never share it." error={errors.email}>
<Input type="email" />
</Field>API
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Label text — clicking it focuses the control. |
| description | ReactNode | — | Helper text (hidden while an error shows). |
| error | ReactNode | — | Error message; flips the control to invalid. |
| required | boolean | — | Adds a red asterisk and aria-required. |
| horizontal | boolean | — | Label and control on one row — for switches and checkboxes. |
| labelAside | ReactNode | — | Right side of the label row, e.g. “Forgot password?”. |