Kina.ai
Menu

Design · Forms

Forms

Forms use native controls, visible labels, and direct language. The shared control surface keeps text entry, selection, validation, and actions consistent without replacing browser semantics.

Fields

Text entry and selection

Keep labels visible above their controls. Use the matching native input type so browsers can provide the right keyboard, validation, and autofill behavior.

Fields marked are required.

Used only for build and verification notices.

Secret values remain masked. Never place the secret itself in help text.

NPZ fixture, up to 10 MB.

Describe the evidence a reviewer should reproduce.

Choices

Checkboxes, radios, and switches

Use checkboxes for independent choices, radios for one choice from a set, and a switch only for an immediate on-or-off setting. The entire label remains clickable.

Verification checks

Choose every check that applies to this change.

Review outcome
Automatic verification

Runs the focused checks whenever the example changes.

States

Help, error, read-only, and disabled

State must remain available to assistive technology and cannot rely on color alone. Put help before entry, and place a specific correction beside an invalid control.

Use lowercase letters, numbers, and hyphens.

Replace underscores and capitals; for example, storylm-0.

Read-only values can still be focused, selected, and copied.

Disabled controls are unavailable and omitted from form submission.

Anatomy

Compose a form from native parts

.form-demo / .form-grid
The specimen surface and its responsive field layout. Production forms can use the same layout without inheriting demo copy.
.field
One label, its optional help or error text, and one control. Use a fieldset for a named choice group.
.field-label
A visible label or legend. Placeholder text never replaces it. Associate labels with controls using htmlFor and a unique id.
.field-hint / .field-error
Persistent instructions and actionable validation copy. Reference both from the control with aria-describedby; add aria-invalid when validation fails.
.control
The shared input, select, and textarea surface. Preserve native focus, autocomplete, validation, read-only, and disabled behavior.
.choice-group / .choice
A vertical set and its clickable input-label row. Radios in one set share a name; checkboxes represent independent choices.
.field-actions
The final action cluster. Keep one primary action and use explicit button types so a secondary control never submits unexpectedly.

Usage

Ask only for what the task needs

Labels and instructions

Write a concise noun phrase for the label. Put formatting rules and consequences in help text before the user starts.

Validation

Validate at a useful moment, preserve entered values, and identify both the problem and the correction. Move focus only after submission when necessary.

Control state

Prefer read-only when people may need to inspect or copy a value. Disable a control only when it is truly unavailable, and explain why nearby.