Field

Forms

Wires a label, description and error message to a control with the right ARIA relationships.

Live preview

First name

Last name

Used for sign-in and receipts.

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Field, Input } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Field label="Password" error="Password is required">
  <Input type="password" error />
</Field>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
label	ReactNode	—	Visible label for the control.
description	ReactNode	—	Helper text below the control.
error	ReactNode	—	Error message; also marks the control invalid.
required	boolean	—	Shows the required mark.
id	string	—	Explicit control id.