Field

A labeled form control. Composes Label, Input or Textarea, and optional hint or error text into a single reusable unit.

Molecule

Label · Input · Textarea

When To Use

Use Field when the user needs to enter or choose information as part of a larger form or workflow.
Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
Do not hide required context, validation, or option meaning behind placeholder text alone.

Keep a visible label or an equivalent accessible name attached to the control.
Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Props

label, htmlFor, hint, error, required, cornerHint

import { Field } from "@hilum/ui"
import { Input } from "@hilum/ui"

<Field label="Email">
  <Input placeholder="you@example.com" />
</Field>

Default

Label with an input

With hint

Helper text below the input

Username

Only letters, numbers, and underscores.

Required

Asterisk marks mandatory fields

Full name

Error

Validation message replaces hint

Enter a valid email address.

With Textarea

Swap Input for Textarea — same API

Message

Up to 500 characters.

Composed form

Multiple fields compose naturally

First name

Last name

We'll never share your email.

Bio