Forms and inputs

Form

Enter a full email address, like name@example.gov

Forms people finish

Forms are where people do the work: issuing licences, starting analyses, configuring models. Make them short, clear and forgiving.

  • Ask only for what you need. Every field must earn its place.
  • One column. Pair short related fields (first and last name) only when they always go together.
  • Labels above fields, always visible. Placeholders show an example format, never the label.
  • Mark optional fields with “Optional”, not required ones with asterisks.
  • Validate on blur and on submit, not on every keystroke. Keep what the user typed.

Text input

States

The address your desks sign in to.
Use the full address, including the domain.
Part / stateValueToken
Height40px (32 / 48)--n-size-control-md
Border1px Steel 20; hover Midnight 50; focus Gulf 60 + 3px halo--n-border-ui, --n-focus
Radius8px--n-radius-sm
TextText Regular 15px, heading colour
PlaceholderSteel 50 — examples only
LabelText Medium 14px, 6px above
Hint / error13px with 15px icon, 6px below--n-status-danger
DisabledPanel background, caption text

Secrets and passwords

Masked by default, revealable on purpose

  • Passwords, API keys, gateway keys and tokens are masked. A reveal button (eye icon) toggles visibility; it is a real button with an aria-label that changes (“Show key” / “Hide key”).
  • Secrets are set in JetBrains Mono so similar characters (l, 1, I) are distinguishable.
  • Show a strength meter and the rules for new passwords, as the user types.
  • Copy buttons on secrets copy the value without revealing it on screen.
  • Never prefill secrets, never show them in toasts or logs, and mask them again when the field loses focus.
  • Use autocomplete="new-password" or current-password so password managers work.
Stored on NorthStar Admiral Server. Desks never see it.
Use 12 or more characters with a mix of words and numbers.

Select and dropdown

Native select for short lists, a menu for rich options

  • Up to ~15 plain options: native <select> styled with the North chevron. It works with keyboards, screen readers and mobile pickers for free.
  • Long lists: a combobox with type-ahead search.
  • Options with icons, descriptions or multi-select: a listbox menu (8px radius, shadow 3, 6px padding, items 36px).
  • The selected option shows a check at the trailing edge. Disabled options stay visible with a reason.
Model

Checkboxes, radios and switches

Selection controls

Modules
Residency
Notifications
ControlUse
CheckboxIndependent on/off choices, or several from a list. Takes effect on save.
RadioExactly one choice from 2–6 visible options. Pre-select the safest default.
SwitchA setting that applies immediately (no save button).
Segmented controlSwitching a view, not a setting. See Navigation.

Date picker and calendar

Type it or pick it

  • Let people type dates (13 Oct 2026) and offer the calendar as a helper, not the only way.
  • Weeks start on Monday. Today has a ring; selected days are filled Gulf; ranges are tinted between the ends.
  • Disabled days are struck through and skipped by keyboard. Days with events carry a small Oasis dot.
  • Show the time zone next to time inputs (GST).
  • In Arabic the grid mirrors and month names follow the Gulf convention.
October 2026
MoTuWeThFrSaSu

File upload

Drop zone

Drop files here or browse

PDF, DOCX or XLSX · up to 50 MB · files stay on this machine

Validation and errors

  • Show errors next to the field, in plain language, saying how to fix it: “Use the full address, including the domain.”
  • On submit, move focus to an error summary at the top that links to each field.
  • Never clear fields after an error. Never blame the user.
  • Disable the submit button only while submitting, not while the form is incomplete; let people try and learn what is missing.

Code

<div class="n-field">
  <label class="n-label" for="email">Work email</label>
  <input id="email" class="n-input" type="email" aria-invalid="true" aria-describedby="email-error">
  <span class="n-error" id="email-error">Enter a full email address, like name@example.gov</span>
</div>

<!-- Tailwind input -->
<input class="h-control-md w-full px-3 rounded-sm border border-n-border-ui bg-n-surface-raised text-n-heading
  placeholder:text-steel-50 hover:border-n-caption focus:outline-none focus:border-n-focus
  focus:ring-3 focus:ring-n-focus/20 aria-invalid:border-status-danger disabled:bg-n-panel">

Dos and don'ts

Do

  • Keep labels visible above fields.
  • Explain errors and how to fix them.
  • Mask secrets and make reveal deliberate.
  • Use native controls where they work.

Don't

  • Use placeholders as labels.
  • Validate on every keystroke.
  • Show secrets in plain text by default or in notifications.
  • Build custom dropdowns for three options.

Last updated on 14 October 2026