Returnless UI

Form layout ​

Use form layout to arrange fields with a form using standard spacing. By default, it stacks fields vertically but also support horizontal groups of fields.

Usage ​

js
<script lang="ts" setup>
import { FormLayout, TextField } from '@returnless/focus-ui';
</script>

<template>
  <FormLayout>
    <TextField label="Name" />
    <TextField label="Email" type="email" />
  </FormLayout>
</template>

Horizontal form layout ​

js
<script lang="ts" setup>
import { FormLayout, TextField } from '@returnless/focus-ui';
</script>

<template>
  <FormLayout :columns="2">
    <TextField label="Company name" />
    <TextField label="Invoice email" />
    <TextField label="Street + house number" />
    <FormLayout :columns="2">
      <TextField label="Postcode" />
      <TextField label="City" />
    </FormLayout>
    <TextField label="Country" />
    <TextField label="VAT number" />
    <TextField label="P.O. number / reference" />
  </FormLayout>
</template>

Best practices ​

Forms should:

  • Be considerate of users’ time and privacy by only asking for information that’s required
  • Group related tasks under section titles to provide more context and make the interface easier to scan
  • Follow a logical, predictable order—for example, always ask for first-name first, and last-name second on forms

Content guidelines ​

Form section title ​

Form section titles should follow the content guidelines for headings and subheadings.

Field label ​

A label is a short description of a field. Labels are not help text, and they shouldn’t be used to provide instruction, but they should be meaningful and clearly indicate what is expected. Labels should be:

  • Placed above or beside the form field
  • Short and succinct (1–3 words)
  • Written in sentence case (the first word capitalized, the rest lowercase)

Help text ​

Help text provides extra guidance to people filling out a form field. This text is easy for people to ignore, so users should not need to depend on it to fill out a form. As with all forms, help text should be succinct and easy to read.