Form layout

Compose fields from text inputs, choice controls, and actions. In Nuxt / PLAI use Nuxt UI form components (UFormField, UInput, etc.).

Element	Source
Labels, hints, field spacing	Nuxt UI
Text inputs, textarea, select	Nuxt UI — focus ring CI
Checkbox / radio checked state	CI brand blue
Switch track (on)	CI brand blue
Save / Cancel buttons	CI primary · Nuxt UI outline

Live examples

Single field

Display name

Shown to teammates on shared cases.

Validation

Organisation

Organisation name is required.

Choice group

Notifications

Email updates Push notifications

Actions row

Nuxt UI

HTML

<div class="ci-field">
  <label class="ci-label" for="name">Display name</label>
  <input id="name" class="ci-input" type="text" />
  <p class="ci-hint">Shown to teammates on shared cases.</p>
</div>

Accessibility

One <label> per control; for / id must match.
Group related radios or checkboxes in <fieldset> with <legend>.
Errors: aria-invalid="true" on the control + aria-describedby on the error paragraph’s id.
Tab order: fields top-to-bottom, then primary action before secondary.

Text field · Textarea · Select
Checkbox · Radio · Switch
Button — submit and cancel actions