Components

Forms

The confirmed text-input layer — border, radius, and focus tokens — extended with the field types every real product needs: checkboxes, radios, selects, textareas, and validation states. Extensions are derived from confirmed neighbouring tokens (Toggles, Text Fields, the error colour) rather than invented from scratch.

Live

Focus the field — real :focus-visible, magenta ring

UsernameEmailUsernameThis username is already taken.

Extended · Checkboxes & radios

Square for multi-select, circular for single-select

Both reuse the 20px control size, --ig-stroke resting border, and --ig-primary-button checked fill already confirmed for Toggles — just at a smaller, denser scale appropriate for list-form selection.

Checkbox — custom-painted native input

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgb(var(--ig-stroke));
  background: rgb(var(--ig-primary-background));
}
.checkbox:checked {
  background: rgb(var(--ig-primary-button));
  border-color: rgb(var(--ig-primary-button));
}
.checkbox:focus-visible {
  outline: 2px solid var(--ig-stop-magenta);
  outline-offset: 2px;
}
.checkbox:disabled { opacity: 0.5; }

/* Radio — identical control, pill radius, inset dot via ::before */
.radio { border-radius: var(--radius-pill); }
.radio::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  background: rgb(var(--ig-primary-button));
  transform: scale(0);
}
.radio:checked::before { transform: scale(1); }

Extended · Select

Same border, radius, and height as Text Fields

A select field is a Text Field with a trailing chevron and no free-text entry — it doesn't introduce a new border or radius token.

Audience

Extended · Textarea

Multi-line variant of the same field grammar

Vertical resize only — horizontal resize breaks layout on every surface this would appear in (composer, bio editor, comment box).

Bio

Extended · Validation

Error state reuses --ig-error, never a new colour

The border and focus ring switch to the system's existing error red. Helper text appears below the field in the same colour — never as a separate toast or alert for field-level errors.

UsernameThis username is already taken.

Error state — applies to input, select, or textarea

.field--error {
  border-color: rgb(var(--ig-error));
}
.field--error:focus-visible {
  outline-color: rgb(var(--ig-error));
}
/* Helper text sits directly below, same colour, system-12 */
.field__helper--error {
  color: rgb(var(--ig-error));
  font-size: 12px;
}

Usage

Do / Don't

Do

Use var(--input-radius) (6px) for every text input, select, and textarea — matching buttons and other input-shaped controls.
Source border colour from the paired light/dark text-input-border token rather than a hard-coded grey.
Show a clear, visible :focus-visible ring on every field type — see Accessibility.
Reuse the 20px checkbox/radio size and --ig-primary-button checked fill confirmed for Toggles — don't invent a new control scale.
Show validation errors inline below the field, in --ig-error, not as a separate toast.

Don’t

Invent a bespoke radius or border treatment for a new form field — derive it from the confirmed field tokens.
Remove the focus ring without a confirmed, equally visible replacement.
Allow horizontal textarea resize — only vertical, to protect surrounding layout.
Introduce a second 'success' green border state — Instagram's confirmed forms only signal error, not success, at the field level.