Field

Recipient

Full legal name on the account

Reference

This field is required

Field is the wrapper every input uses. It renders a label, an optional description and error, and clones its child to connect them with the right id, aria-describedby, and aria-invalid. You get correct form accessibility without threading IDs by hand.

Usage

import { Field } from "@sina-design-system/core";

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

Examples

Label & description

Recipient

Full legal name on the account

Error & required

Reference

This field is required

Reference

Any control · the a11y wiring clones onto the child

Region

Pick one

Notes

Free-form text

Quantity

Whole units

Props

Prop	Type	Default	Description
`label`	`ReactNode`	—	The field label (associated with the control).
`description`	`ReactNode`	—	Helper text below the label.
`error`	`ReactNode`	—	An error message. Sets aria-invalid and shows a bold warning glyph.

Errors carry a glyph

When error is set, Field renders the mandatory bold warning glyph beside the message, never color alone. That's a SINA-wide rule for error and warning states.