Text Field

ready

Labelled single-line text input with optional helper and error states.

The Text Field is the workhorse input across Cirrus record forms. It pairs a label (with optional required marker) and a bordered value container, plus optional helper or error text below.

Anatomy

We'll never share it.

  1. 1 Label — names the field; uses the input-label token
  2. 2 Required marker — red asterisk when the field is mandatory
  3. 3 Control — bordered container; shows focus and error styling
  4. 4 Value / placeholder — user input, or muted placeholder when empty
  5. 5 Helper / error — supporting or validation text below the control

Variants

Default

<TextField label="Label" placeholder="Input Value" />

Required

<TextField label="Last Name" required value="Calloway" />

Helper text

We'll never share it.

<TextField label="Email" helper="We'll never share it." />

States

The control reflects interaction and validation state. Focus shows a purple border with a soft tint ring.

Default

Empty, showing placeholder.

Filled

Holds a value.

Enter a valid email address.

Error

Red border + message.

Disabled

Greyed out, not editable.

Usage

✓ Do

Keep labels short and in sentence case.

✕ Don't

Don't push instructions into the placeholder — use helper text.

Accessibility

  • The label is associated with the input via a derived id/for pair; always provide a label.
  • Errors set aria-invalid="true" on the input so assistive tech announces the invalid state.
  • Required fields render a visual *; pair it with required so it’s also exposed to the accessibility tree.
  • Helper and error text sit adjacent to the control for a clear reading order.

Content

  • Use a concise, sentence-case noun label (“Last name”, not “Enter Your Last Name”).
  • Reserve the placeholder for a format hint, never for the label or instructions.
  • Keep helper text to one short sentence; lead with what the user should do.

Props

PropTypeDefaultNotes
labelstring—Field label, rendered above the control.
namestring—Input name; also used to derive the id.
valuestring—Initial value.
placeholderstring"Input Value"Shown when empty.
requiredbooleanfalseRenders the red * marker.
helperstring—Helper text below the field.
errorstring—Error message; overrides helper and flags the control.
disabledbooleanfalseGreys out and blocks input.
  • Select — dropdown counterpart with the same shell.
  • Date Picker — Text Field variant for dates.
  • Tokens — the color and type tokens used here.