Forms

Forms inherit the button rhythm — same radius, same focus ring, same spacing steps. Labels above inputs, hints below, errors in danger-600.

Anatomy

Lowercase slug, matches the repo name.

No cluster matches that name.

A full form

composed

Markup

<label class="form-label">App name</label>
<input class="form-input" type="text">
<p class="form-hint">Helper text.</p>

<input class="form-input form-input-error">
<p class="form-error">What went wrong.</p>

Input group variants

Hidden label

Corner hint

Optional

Leading icon

Trailing icon

Add-on

https://

Inline add-ons

$ AUD

Inline leading dropdown

Leading icon, trailing button

Keyboard shortcut

⌘K

Inset label

Shared borders

Overlapping label

Pill shape

Sunken with bottom border

Inline add-on, trailing dropdown

$