Forms

Field

Label, control, helper text and error in one, with the accessibility wiring done: the label points at the control, the text is linked with aria-describedby, and an error sets aria-invalid.

We never share it.

Website

Enter a valid address.

demos/field.tsx

import { Field } from "pixelbits/field";
import { Input } from "pixelbits/input";

export default function Demo() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <Field label="Email" description="We never share it." required>
        <Input type="email" placeholder="you@studio.com" />
      </Field>
      <Field label="Website" error="Enter a valid address.">
        <Input defaultValue="studio,com" />
      </Field>
    </div>
  );
}

Installation

npm: import

import { Field } from "pixelbits/field";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/field.json

API

<Field>

Label, control, helper text and error in one, with the accessibility wiring done: the label points at the control, the text is linked with aria-describedby, and an error sets aria-invalid.

Example

<Field label="Email" description="We never share it." error={errors.email} required>
  <Input type="email" name="email" />
</Field>

Prop	Type	Default	Description
label*	ReactNode	—	Visible label, linked to the control with `for`/`id`.
description	ReactNode	—	Helper text under the control, linked with `aria-describedby`.
error	ReactNode	—	Error message. When set, the control is marked `aria-invalid` and the message replaces the description and is announced.
required	boolean	false	Marks the control as required and shows a small accent square after the label.
disabled	boolean	false	Disables the control and dims the label.
id	string	—	Id of the control. Generated when omitted.
children*	ReactNode	—	The control: `Input`, `Textarea`, `Select`, `Combobox`, `Slider`…

Also accepts every prop of Omit<HTMLAttributes<HTMLDivElement>, "children">.