Field

MISSION ID

USED FOR TRACKING

LAUNCH CODE

CODE REQUIRED

Source

"use client"

import { Field } from "@/registry/warren/field/field"
import { Input } from "@/registry/warren/input/input"

export default function FieldDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Field label="MISSION ID" htmlFor="mission-id" hint="USED FOR TRACKING" className="w-64">
        <Input id="mission-id" placeholder="E.G. 0427" />
      </Field>
      <Field label="LAUNCH CODE" htmlFor="launch-code" error="CODE REQUIRED" className="w-64">
        <Input id="launch-code" placeholder="E.G. ALPHA-9" aria-invalid />
      </Field>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/field.json

Usage

import { Field } from "@/components/ui/field"

<Field label="MISSION ID" htmlFor="mission-id" hint="USED FOR TRACKING">
  <Input id="mission-id" />
</Field>

Hint

Pass hint for helper text rendered under the control in muted foreground — useful for format guidance or contextual notes. Omitted when error is set.

<Field label="MISSION ID" hint="USED FOR TRACKING">
  <Input />
</Field>

Error

Pass error for validation feedback rendered under the control in the danger text grade. Pair it with aria-invalid on the control so the danger border matches.

<Field label="LAUNCH CODE" error="CODE REQUIRED">
  <Input aria-invalid />
</Field>

Accessible descriptions

Pass descriptionId to Field and the same id to the control's aria-describedby so screen readers announce the hint or error alongside the value. The id lands on the rendered hint/error <p>.

<Field label="MISSION ID" descriptionId="mission-id-hint" hint="USED FOR TRACKING">
  <Input id="mission-id" aria-describedby="mission-id-hint" />
</Field>

Required

Set required to append a danger * to the label without writing it by hand.

<Field label="MISSION ID" required>
  <Input />
</Field>

API Reference

Prop

Type