Field

Label, control, description and error as one unit. Controls inside (Input, Textarea, Select, Checkbox, Switch, RadioGroup) get id, aria-describedby, aria-invalid and required automatically; errors spring in and are announced.

npx @kznlabs/labsui add field

"use client";import { useState } from "react";import { Button } from "@/components/ui/button";import { Field } from "@/components/ui/field";import { Input } from "@/components/ui/input";export function SignupForm() {  const [error, setError] = useState<string>();  return (    <form      noValidate      onSubmit={(e) => {        e.preventDefault();        const email = String(new FormData(e.currentTarget).get("email"));        setError(          email.includes("@") ? undefined : "Enter a valid email address.",        );      }}    >      <Field        label="Email"        description="We never share it."        error={error}        required      >        <Input name="email" type="email" />      </Field>      <Button type="submit">Create account</Button>    </form>  );}

<Field>

Label, control, description and error as one unit, with ids and ARIA wired automatically.

children*
ReactNode
One form control; it picks up id, aria and state from the Field.
description
ReactNode
Hint under the control.
disableddefault false
boolean
Dims the label and disables the control.
error
ReactNode
Shown under the control and marks it aria-invalid. Springs in and out.
id
string
Use when the control renders its own id (it must match).
label
ReactNode
Label wired to the control's id.
orientationdefault "vertical"
"vertical" | "horizontal"
"horizontal": control first, label beside it (Checkbox, Switch).
requireddefault false
boolean
Marks the label and makes the control required.

Prop	Type	Default
`children*` One form control; it picks up id, aria and state from the Field.	`ReactNode`	—
`description` Hint under the control.	`ReactNode`	—
`disabled` Dims the label and disables the control.	`boolean`	`false`
`error` Shown under the control and marks it aria-invalid. Springs in and out.	`ReactNode`	—
`id` Use when the control renders its own id (it must match).	`string`	—
`label` Label wired to the control's id.	`ReactNode`	—
`orientation` "horizontal": control first, label beside it (Checkbox, Switch).	`"vertical" \| "horizontal"`	`"vertical"`
`required` Marks the label and makes the control required.	`boolean`	`false`

useFieldControl()

For controls: fills id, aria-describedby, aria-invalid, required and disabled from the enclosing <Field>. Explicit props win. Outside a Field it returns the props unchanged.

useFieldControl(props: Props) => Props

* required. Every component also takes className.