All components

INPUTS / COMPONENTS

Field label

Give every field a clear name.

Live component3 documented props

About field label

Associate the label with a stable input ID. Use a real required attribute on the input as well as a visual indicator.

01

Anatomy

Shared parts, named consistently.

  1. 1
    Label

    Names the component, action, or content. Keep it clear and persistent.

  2. 2
    Required indicator

    Reinforces meaning or state. Provide text whenever the meaning is essential.

Try the default

A working example with the shared V1 visual language.

When to use

Associate the label with a stable input ID. Use a real required attribute on the input as well as a visual indicator.

Clicking the label focuses its associated control. The label supplies its accessible name.

Related components

Text field

Collect one precise piece of information.

Text area

Give longer answers room to breathe.

Checkbox

Choose independent options.

Radio group

Choose one answer from a visible set.

Source & adaptation

V1 semantic colors, DM Sans typography, compact controls, and responsive layouts. The API table describes this implementation; source design notes may use earlier API terminology.

components/library/inputs.tsx