Component

Field

A form wrapper for labels, helper copy, error copy, inputs, and textareas.

Preview

Entry nameUse a name you can scan later.AmountAmount is required.Notes

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Field } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/field.json

Copied source import

code

import "@/styles/axie.css";import { Field } from "@/components/axie/field";

Prefer @axie/field? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Field, Input } from "axie-ui";export function Example() {  return (    <Field helper="Use a name you can scan later." label="Entry name">      <Input placeholder="Lunch with Mara" />    </Field>  );}

Accessibility

Associate labels, helper text, and errors with the input using ids when wiring complex forms.
Keep the label visible above the control.
Reserve error text for actionable validation messages.

API Reference

Prop	Type	Default	Description
label	string	-	Visible field label.
helper	string	-	Optional supporting copy under the control.
error	string	-	Inline validation message. Overrides helper text.