Work with us
FormsStable

Input

Sourcecomponents/Input.astro

We’ll only use this to reply.

The real field — click in, type, tab away.

Overview

Five states — default, focus, filled, error and disabled — on light, dark & image.

On light

default
focus
filled
error
disabled

Enter a valid email.

On dark

default
focus
filled
error
disabled

Enter a valid email.

On image

default
focus
filled
error
disabled

Enter a valid email.

Anatomy

Label, field and — when present — a helper or error stack with a small gap. The field carries the states.

We’ll only use this to reply.

  • Label — --fs-label (15px · Medium 500)
  • Label ↔ field / field ↔ message gap — --space-xs (8px)
  • Field text — --fs-body-2 (17px)
  • Padding — 14px vertical · --space-md (16px) horizontal
  • Radius — --radius (20px, same as buttons) · Border --border-default, violet on focus
  • Helper / error — --fs-helper (13px)

Props

PropTypeDefaultNotes
label string — Field label above the input. Omit for a bare field.
type 'text' | 'email' | 'tel' | 'url' | 'password' | 'search' | 'number' 'text' The HTML input type.
placeholder string — Ghost text shown when empty.
value string — Prefilled value.
helper string — Hint shown beneath the field.
error string — Error message; flips the field to the error style and replaces the helper.
optional boolean false Shows "(optional)" beside the label.
required boolean false Marks the field required.
disabled boolean false Dims and blocks input.
surface 'light' | 'dark' 'light' Dark surface treatment for inputs on ink sections.

Usage

Give every field a label. Use helper for guidance and error for a failed check.

<Input
  name="email"
  type="email"
  label="Email"
  placeholder="jane@company.com"
  required
/>

<Input label="Company" optional placeholder="Company AG" />

<Input label="Email" value="not-an-email" error="Enter a valid email address." />

Rules

Do

Always pair the field with a visible label — placeholders aren’t labels.

Add helper only when a field needs guidance — it’s optional, and most fields skip it.

Mark optional fields with optional; assume everything else is required.

Don't

Rely on the placeholder to explain the field — it disappears on type.

Show an error before the person has had a chance to fill it in.