Field

A field’s label, hint, control and error, always in the same order and spacing.

Playground

<div class="feitio-field"><label class="feitio-label" for="pg-name">Reminder name</label><input class="feitio-input" id="pg-name"></div>

When to use

• Around every form field: TextInput, Textarea, Select, TimeInput.

When not to use

• For a group of options (Radios, Checkbox): the group uses Fieldset, with the title in the legend.

Examples

<div class="feitio-field">
  <label class="feitio-label" for="nome">Nome do lembrete</label>
  <span class="feitio-hint" id="nome-dica">Aparece na notificação</span>
  <input class="feitio-input" id="nome" aria-describedby="nome-dica nome-erro" aria-invalid="true">
  <span class="feitio-error-message" id="nome-erro">…Escreva um nome</span>
</div>

Placeholder text

• Allowed as a short extra example, under a label that stays.
• Never instead of the label or hint: it disappears when the person types.
• Never with needed information: that goes in the hint, which stays.

Anatomy

Writing

• Label: a short noun or a direct question, without a colon.
• Hint: only if it helps get it right the first time.
• Optional: "(optional)" at the end of the label.

Accessibility

• The label is a real <label for>: clicking it focuses the field.
• Hint and error go in aria-describedby; screen readers read them with the label.

Attributes