Components / forms

Field

Row Wrapper - Micro-Label, Control, Hint / Error

01 Preview

02 Usage

Labels and annotates any control with the spec-sheet micro-label treatment.

<Field label="Email" htmlFor="e" required hint="I reply within a week.">
  <Input id="e" type="email" placeholder="you@domain" />
</Field>

<Field label="Message" error="Required.">
  <Textarea rows={4} />
</Field>

error overrides hint. Wraps Input, Textarea, Select, RadioGroup, etc.

03 Props

PropTypeDefaultNotes
label React.ReactNode — —
hint React.ReactNode — Helper text below the control.
required boolean false Appends an amber required marker to the label.
htmlFor string — `htmlFor` forwarded to the label.
children React.ReactNode — —

Also accepts every attribute of React.HTMLAttributes<HTMLDivElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Field } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';