FormField

A labeled form control (text input, select or textarea) with helper or error text, plus the consent checkbox.

Contact form fieldsDark · Grafite

Contact form fieldsLight · Gelo

Usage

Provide a visible label, the control, and helper text when the format is not obvious. Inputs use border-strong borders on surface, 16px text (which prevents zoom on phones) and a 44px minimum height. Errors appear under the field in danger, say what to fix (“Informe um e-mail ou telefone”), and turn the control border danger; the component links them to the control with aria-describedby and sets aria-invalid.

Do

Always show a label; never rely on a placeholder.
Mark optional fields "(opcional)" instead of starring required ones.
Write errors that say what to fix, under the field.
Leave the consent checkbox unchecked.

Don't

Disable the submit button to signal errors.
Ask for CPF, documents or other sensitive data.
Pre-check the consent checkbox.

Astro

---
import Checkbox from '@monk-business/astro/Checkbox.astro';
import Field from '@monk-business/astro/Field.astro';
---

<Field label="Nome" name="name" autocomplete="name" required />
<Field label="E-mail" name="email" type="email" error="Informe um e-mail ou telefone." />
<Field
  as="select"
  label="Assunto"
  name="interest"
  emptyOption="Selecione"
  options={[
    { value: 'portabilidade', label: 'Portabilidade numérica' },
    { value: 'ia', label: 'IA e agentes' },
  ]}
/>
<Field as="textarea" label="Mensagem" name="message" optional help="Até 2.000 caracteres." />
<Checkbox name="consent" required>
  Concordo com o uso destes dados, conforme a <a href="/privacidade/">Política de Privacidade</a>.
</Checkbox>

HTML

<div class="mb-field mb-field--error">
  <label class="mb-label" for="email">E-mail</label>
  <input class="mb-input" id="email" name="email" type="email" aria-invalid="true" aria-describedby="email-error" />
  <p class="mb-error" id="email-error">Informe um e-mail ou telefone.</p>
</div>
<div class="mb-field">
  <label class="mb-label" for="message">Mensagem <span class="mb-optional">(opcional)</span></label>
  <textarea class="mb-textarea" id="message" name="message" aria-describedby="message-help"></textarea>
  <p class="mb-help" id="message-help">Até 2.000 caracteres.</p>
</div>
<label class="mb-check" for="consent">
  <input id="consent" type="checkbox" name="consent" value="true" required />
  <span>Concordo com o uso destes dados, conforme a <a href="/privacidade/">Política de Privacidade</a>.</span>
</label>

Props

Field props · also accepts the attributes of `<input>`
Prop	Type	Default	Description
`as`	`'input'`\| `'select'`\| `'textarea'`	`'input'`	Control to render.
`label *`	`string`	—	Visible label. Never rely on a placeholder instead.
`name *`	`string`	—	Field name (submitted with the form). Also the base of the default `id`.
`id`	`string`	`'field-<name>'`	Control `id`; the help and error texts get `<id>-help` and `<id>-error`.
`type`	`'text'`\| `'email'`\| `'tel'`\| `'url'`\| `'number'`\| `'password'`\| `'search'`\| `'date'`	`'text'`	Input type (inputs only).
`value`	`string`	—	Initial value.
`help`	`string`	—	Helper text under the control, for formats that are not obvious.
`error`	`string`	—	Error message under the control. Sets `aria-invalid` and the danger border.
`optional`	`boolean`	`false`	Appends "(opcional)" to the label.
`optionalLabel`	`string`	`'opcional'`	The word used for optional fields.
`options`	`SelectOption[]`	—	Options for `as="select"`. Options in the default slot are rendered after these.
`emptyOption`	`string`	—	First, empty option of a select, such as "Selecione".
`rows`	`number`	`5`	Visible rows (textareas only).
`class`	`string`	—	Extra classes for the wrapper.

SelectOption
Prop	Type	Default	Description
`value *`	`string`	—	Submitted value.
`label *`	`string`	—	Visible text.
`selected`	`boolean`	—	Initially selected.
`disabled`	`boolean`	—	Not selectable.

* required.

Checkbox props · also accepts the attributes of `<input>`
Prop	Type	Default	Description
`label`	`string`	—	Label text. The default slot replaces it when you need markup.
`name *`	`string`	—	Field name.
`id`	`string`	`'check-<name>'`	Checkbox `id`; the help and error texts get `<id>-help` and `<id>-error`.
`value`	`string`	`'true'`	Submitted value when checked.
`checked`	`boolean`	`false`	Initially checked. Never pre-check consent.
`help`	`string`	—	Helper text under the checkbox.
`error`	`string`	—	Error message under the checkbox. Sets `aria-invalid`.
`class`	`string`	—	Extra classes for the wrapper.

* required.