Forms

Form element styles ship as bare element selectors — no extra classes required oninput, textarea, or select. All styles consume Tier-3 --input-* tokens so the full form palette can be rethemed in one place without touching semantic tokens.

Form elements

Include farn-components.css — every input, textarea, and select is styled automatically. Use .form-field to group a label with its control and optional hint text.

States

Hover darkens to --input-bg-active. Focus adds a coloured border and glow ring. Error via aria-invalid="true" (preferred) or .form-field--error wrapper. Readonly shows the field with a page-level background and a default cursor. Disabled reduces opacity and suppresses pointer events.

Invalid value.
Cannot be edited; use disabled to visually suppress interaction.

Wrapper + hint

.form-field stacks label, control, and optional hint text with consistent spacing. .form-hint renders helper or error text below the control in a smaller, secondary colour.

3–24 characters, letters and underscores only.
Enter a valid email address.
Full reference — Form elements

Anatomy

<!-- Minimal — element selector handles all styling -->
<input type="text" placeholder="…" />

<!-- With label -->
<label for="x">Label</label>
<input type="text" id="x" />

<!-- Full wrapper pattern -->
<div class="form-field">
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="Jane Smith" />
</div>

<!-- With hint text -->
<div class="form-field">
  <label for="username">Username</label>
  <input type="text" id="username" />
  <span class="form-hint">3–24 characters, letters and underscores only.</span>
</div>

<!-- Error via ARIA attribute -->
<input type="email" aria-invalid="true" value="bad@" />

<!-- Error via wrapper — colours label and hint too; aria-describedby links hint to input -->
<div class="form-field form-field--error">
  <label for="email">Email</label>
  <input type="email" id="email" aria-invalid="true"
         aria-describedby="email-hint" value="bad@" />
  <span class="form-hint" id="email-hint">Enter a valid email address.</span>
</div>

<!-- Disabled -->
<input type="text" disabled value="Cannot edit" />

Token reference

All --input-* tokens are defined in tokens/components.css.

TokenDefaultPurpose
--input-radiusvar(--radius-md)Border radius for all form controls
--input-bgvar(--color-bg-panel)Idle background
--input-bg-activevar(--color-bg-inset)Hover and focus background
--input-bordervar(--color-border)Idle border colour; overridden to --in3-ash on dark layer/overlay surfaces
--input-border-focusvar(--color-accent)Focus border colour
--input-border-errorvar(--color-error)Error border colour
--input-focus-shadow0 0 0 3px color-mix(…)Focus glow ring
--input-textvar(--color-text)Input text colour
--input-placeholdervar(--color-text-tertiary)Placeholder text colour
--input-disabled-opacity0.4Opacity applied to disabled controls

Overriding tokens

/* Tighter radius for a dense data-entry panel */
.data-panel {
  --input-radius: var(--radius-sm);
}

/* Visible idle border in a flat section */
.flat-form {
  --input-bg:     transparent;
  --input-border: var(--color-border);
}