Field

Code

import { Field, FieldDescription, FieldLabel, Input } from "@fadymondy/nasaq/web";export function ProjectName() {  return (    <Field name="project">      <FieldLabel>Project name</FieldLabel>      <Input placeholder="Nasaq" />      <FieldDescription>Shown in the sidebar and on invoices.</FieldDescription>    </Field>  );}

Forms · stable

Live examples and controls: Field in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/field.json

Groups a form control with its label, helper text and error message, and wires them together (for/id, aria-describedby, aria-invalid) through Base UI's Field. Input and Textarea are the Nasaq-styled text controls: one control height, a visible focus ring, and an invalid border that is always paired with error text.

When to useCopy Anchor Link

• Any single-value text form row that needs a label, hint or validation message.
• Standalone text inputs (Input and Textarea work without Field, for example a toolbar search).

When not to useCopy Anchor Link

• On/off settings that apply immediately: use Switch.
• Laying out several fields: compose Fields in a plain flex or grid column; there is no form component.
• Static label/value display: use Text.

ImportCopy Anchor Link

import { Field, FieldLabel, FieldDescription, FieldError, Input, Textarea } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Field, FieldDescription, FieldLabel, Input } from "@fadymondy/nasaq/web";

export function ProjectName() {
  return (
    <Field name="project">
      <FieldLabel>Project name</FieldLabel>
      <Input placeholder="Nasaq" />
      <FieldDescription>Shown in the sidebar and on invoices.</FieldDescription>
    </Field>
  );
}

AnatomyCopy Anchor Link

Field                     data-slot="field"              (flex column, gap 1.5)
├─ FieldLabel             data-slot="field-label"
├─ Input                  data-slot="input"              (Base UI Input; joins the Field automatically)
│  or Textarea            data-slot="textarea"           (Field.Control as <textarea>)
│  or FieldControl        (Base UI Field.Control, unstyled re-export)
├─ FieldDescription       data-slot="field-description"
└─ FieldError             data-slot="field-error"

APICopy Anchor Link

Every part forwards its remaining props to the Base UI part it wraps. Types are the Base UI types (ComponentProps<typeof BaseField.Root> and so on). The tables list what matters most.

FieldCopy Anchor Link

Wraps Base UI Field.Root. Adds the className merge and data-slot="field".

FieldLabel, FieldDescriptionCopy Anchor Link

Wrap Field.Label and Field.Description. Only className and Base UI's own props apply. FieldLabel dims with data-disabled.

FieldErrorCopy Anchor Link

Wraps Field.Error. Renders text-caption in text-nq-danger-text.

InputCopy Anchor Link

Wraps Base UI Input (ComponentProps<typeof BaseInput>), so every native <input> prop works (type, value, defaultValue, onChange, placeholder, aria-invalid, ...). Height h-control, full width.

InputProps extends ComponentProps<typeof BaseInput> adds:

TextareaCopy Anchor Link

Renders Base UI Field.Control as a <textarea> (ComponentProps<"textarea">), min-h-20, py-2. It shares the control styles of Input and is wired to FieldLabel, FieldDescription and FieldError (including data-invalid).

FieldControlCopy Anchor Link

export const FieldControl = BaseField.Control: the unstyled Base UI control, for a Field control that is not Input.

ExamplesCopy Anchor Link

Description and textareaCopy Anchor Link

import { Field, FieldDescription, FieldLabel, Textarea } from "@fadymondy/nasaq/web";

export function Description() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Description</FieldLabel>
      <Textarea rows={3} placeholder="What is this project for?" />
      <FieldDescription>Visible to everyone in the workspace.</FieldDescription>
    </Field>
  );
}

Invalid state with an error messageCopy Anchor Link

import { Field, FieldError, FieldLabel, Input } from "@fadymondy/nasaq/web";

export function EmailField() {
  return (
    <Field invalid className="max-w-sm">
      <FieldLabel>Email</FieldLabel>
      <Input type="email" defaultValue="fady@" aria-invalid />
      <FieldError match>Enter a complete email address.</FieldError>
    </Field>
  );
}

DisabledCopy Anchor Link

import { Field, FieldLabel, Input } from "@fadymondy/nasaq/web";

export function WorkspaceId() {
  return (
    <Field disabled className="max-w-sm">
      <FieldLabel>Workspace ID</FieldLabel>
      <Input defaultValue="ws_01J9" />
    </Field>
  );
}

Arabic form with an LTR valueCopy Anchor Link

import { Field, FieldDescription, FieldLabel, Input } from "@fadymondy/nasaq/web";

export function ArabicForm() {
  return (
    <div dir="rtl" lang="ar" className="flex max-w-sm flex-col gap-5">
      <Field>
        <FieldLabel>اسم المشروع</FieldLabel>
        <Input placeholder="نسق" />
      </Field>
      <Field>
        <FieldLabel>البريد الإلكتروني</FieldLabel>
        <Input type="email" dir="ltr" className="text-start" placeholder="[email protected]" />
        <FieldDescription>نستخدمه لإرسال الفواتير.</FieldDescription>
      </Field>
    </div>
  );
}

AccessibilityCopy Anchor Link

• Input, Textarea and FieldControl are linked to FieldLabel, FieldDescription and FieldError by Base UI.
• Error text is a real text node next to the invalid border, so invalid state is not colour-only.
• Give an invalid Input aria-invalid; the border styles read both data-invalid and aria-invalid.
• The caller must localise label, description and error text.
• Used outside a Field, give Input and Textarea an explicit aria-label so they have a name.
• Controls respect --nq-touch-min and use 16px text on coarse pointers so iOS does not zoom on focus.

RTL & i18nCopy Anchor Link

• The field is a flex column with no direction of its own; text follows dir.
• px-3 is symmetric, so the control needs no RTL override.
• For emails, URLs and codes pass <Input ltr /> (sets dir="ltr" and text-start) so the value aligns to the reading start. Otherwise use dir="auto" for mixed-script values.
• No built-in strings. Pass labels, placeholders and messages localised.

Styling & tokensCopy Anchor Link

• Control: rounded-control, border-input, bg-card, text-body, text-foreground, placeholder:text-muted-foreground, h-control (Input only).
• Focus: border-nq-focus plus a 1px outline-nq-focus.
• Invalid: data-invalid:border-nq-danger, aria-invalid:border-nq-danger. Error text text-nq-danger-text.
• Disabled: disabled:opacity-50, disabled:cursor-not-allowed.
• Target [data-slot=input], [data-slot=textarea], [data-slot=field-error], and Base UI's data-invalid / data-disabled.
• Extend with className; never override the border colour with raw hex.

Do / Don'tCopy Anchor Link

• Do always render a FieldLabel. A placeholder is not a label.
• Do show errors with FieldError, not only a red border.
• Don't hide the label to save space without an aria-label.
• Don't signal state by colour alone.

RelatedCopy Anchor Link

• Switch for immediate on/off settings.
• Text for the typography roles used by labels.

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-forms-field--docs