# Field settings

Labels, placeholders, defaults, validation rules, and per-field options.

## Field settings

Every question has shared settings — title, required, placeholder — plus type-specific options like character limits, file restrictions, and validation rules. This page covers them all.

<h2 id="accessing-settings">Accessing field settings</h2>
<p>
  Type a question's title and options straight on the canvas. Everything else lives in the block menu: click the drag handle on the block's
  left edge (or tap the block indicator on touch) and pick from <strong>Turn into</strong>, <strong>Options</strong>,{' '}
  <strong>Validation</strong>, and the usual duplicate / move / hide / delete actions.
</p>

<h2 id="common-settings">Common settings</h2>
<p>These options appear on every question, whatever its type.</p>

<p>
  A field's key — the name automations prefill and read it by — is set in the <strong>Keys</strong> table, which the toolbar's key icon
  opens for the whole form: one key per field, option, row and column. Leave a key empty to use the one derived from the title or label.
  Editing a key on a published form warns you that automations using the old key will break. Each option's hint row also carries its key as
  a chip you can edit in place. See <a href="/requests/field-keys">Field keys</a> for how keys are derived, frozen at publish, and used by
  callers.
</p>

> 💡 **Adding help text**
> <p>
>     formbase is a document-style editor — to add help text or instructions for a question, insert a paragraph or heading block above or
>     below the field on the canvas. Content blocks between questions are visible to respondents and work just like any other block.
>   </p>

> ℹ️ **Title visibility and data**
> <p>
>     Hiding a title does not remove the field from submissions. It still shows as a column header in exports, so give hidden-title fields a
>     clear internal name.
>   </p>

<h2 id="text-options">Text options</h2>
<p>
  <strong>Min length</strong> and <strong>Max length</strong> live under <strong>Validation</strong> in the block menu and apply to{' '}
  <strong>Text Input</strong>, <strong>Text Area</strong>, and <strong>Website URL</strong>. Text Area is the multi-line variant of Text
  Input — switch between them with <strong>Turn into</strong>.
</p>

<h2 id="number-options">Number options</h2>
<p>
  <strong>Minimum</strong> and <strong>Maximum</strong> live under <strong>Validation</strong> and apply to <strong>Number</strong>,{' '}
  <strong>Star Rating</strong>, and a linear scale. <strong>Number</strong> also has <strong>Step</strong>: the answer must be a multiple of
  it, so a step of 1 accepts only whole numbers and 0.5 accepts halves. Leave it empty to accept any number.
</p>

<h2 id="choice-options">Choice options</h2>
<p>
  These settings apply to choice fields: <strong>Radio Buttons</strong>, <strong>Checkboxes</strong>, <strong>Dropdown</strong>,{' '}
  <strong>Ranking</strong>, <strong>Single Picture Choice</strong>, and <strong>Multi Picture Choice</strong>.
</p>

<p>
  Single options can also be hidden or preselected from the canvas: with the cursor in an option, press ⌘ + H (Ctrl + H) to hide it, or ⌘ +
  D (Ctrl + D) to select it by default.
</p>

<h2 id="rating-scale-options">Rating and scale options</h2>

<h3 id="rating">Rating</h3>
<p>
  The <strong>Star Rating</strong> field shows 5 stars by default. Use <strong>Increase max stars</strong> and{' '}
  <strong>Decrease max stars</strong> in the block menu to set anything from 1 to 10. Turn it into a linear scale from the same menu; the
  maximum carries over and the menu items become <strong>Increase / Decrease scale max</strong>.
</p>

<h3 id="matrix">Matrix</h3>
<p>
  The <strong>Matrix / Grid</strong> field creates a grid of choices. Define <strong>Rows</strong> (the sub-questions) and{' '}
  <strong>Columns</strong> (the answers). The respondent picks one column per row. Under <strong>Validation</strong> you can{' '}
  <strong>Require all rows</strong> or set <strong>Min answered rows</strong>.
</p>

<h2 id="file-payment-options">File upload and payment options</h2>

<h3 id="file-upload">File upload</h3>
<p>
  <strong>File Upload</strong> takes <strong>Min files</strong>, <strong>Max files</strong>, <strong>Max size (MB)</strong>, and{' '}
  <strong>Accepted types</strong> under <strong>Validation</strong>. See{' '}
  <a href="/building-forms/file-uploads-signatures">File uploads &amp; signatures</a> for the details.
</p>

<h3 id="payment">Payment</h3>
<p>
  The <strong>Payment</strong> field collects a one-time charge. Set the <strong>Amount</strong> and <strong>Currency</strong> on the block
  — USD, EUR, GBP, JPY, CAD, AUD, CHF, SEK, NOK, DKK, NZD, SGD, HKD, AED, or TRY. Each currency has a minimum charge (0.50 for USD and EUR),
  and publishing is blocked until Stripe is connected and the amount is valid. See{' '}
  <a href="/building-forms/payment-collection">Payment collection</a>.
</p>

<h2 id="default-values">Default values from other fields</h2>
<p>
  A field's default value can come from another field in the same form instead of fixed text — a hidden field (for example a URL parameter)
  or a calculated field. It works on the six inputs that have a default-value slot: <strong>Text Input</strong>, <strong>Text Area</strong>,{' '}
  <strong>Email</strong>, <strong>Website URL</strong>, <strong>Phone Number</strong>, and <strong>Number</strong>.
</p>
<p>To set it up:</p>
<ol>
  <li>Click into the field's input.</li>
  <li>
    Type <kbd>@</kbd> as the first character. A menu lists your hidden and calculated fields; keep typing to filter.
  </li>
  <li>
    Pick a field. The input switches to <strong>default value</strong> mode on its own and shows the field as a chip, for example{' '}
    <strong>@recipient</strong>.
  </li>
</ol>
<p>
  To remove the reference, click the <strong>×</strong> on the chip, press <kbd>Backspace</kbd>, or press <kbd>⌘</kbd> + <kbd>D</kbd> again.
  If you want a literal <kbd>@</kbd> instead — a placeholder like <code>@yourhandle</code> — press <kbd>Esc</kbd> to close the menu and keep
  typing; the input stays in the mode it was in. A chip turns red when its field has been deleted; re-adding a field with the same name
  reconnects it.
</p>
<p>
  The chip replaces the field's placeholder text. The <kbd>@</kbd> only opens the menu as the first character, so a default like{' '}
  <code>jeff@example.com</code> stays plain text.
</p>
<p>
  When someone opens the form, the field is pre-filled with the referenced value — for example, a link ending in{' '}
  <code>?recipient=Jeff</code> fills a Text Input that references the <code>recipient</code> hidden field with "Jeff". How it behaves:
</p>
<ul>
  <li>Respondents can change or clear the value. Their own answer is never overwritten.</li>
  <li>
    A calculated field fills the input with the first value it has — usually its initial value. Later changes from logic rules don't replace
    what is already in the input.
  </li>
  <li>
    If the referenced field has no value, the input starts empty. A Number field also stays empty when the value isn't a number (for example{' '}
    <code>?age=abc</code>).
  </li>
  <li>The submission stores both values: the hidden or calculated field, and the question's final answer.</li>
</ul>
<p>
  See <a href="/building-forms/hidden-fields">Hidden fields</a> and <a href="/building-forms/calculated-fields">Calculated fields</a>.
</p>

<h2 id="examples">Examples</h2>

<ul>
  <li>
    <strong>Contact form</strong> — Email field marked required, Text Area for message with a placeholder "Tell us how we can help…", Phone
    Number field marked optional with a paragraph below it: "We'll only call if we need to clarify your request"
  </li>
  <li>
    <strong>NPS survey</strong> — Star Rating set to 10 stars, followed by a Text Area (hidden by default, shown via logic when the score is
    6 or below) with placeholder "What could we improve?"
  </li>
  <li>
    <strong>Product order</strong> — Number field for quantity with min 1 / max 100, Checkboxes for add-ons, and a payment field whose
    amount is driven by a calculated field
  </li>
  <li>
    <strong>Event RSVP</strong> — Radio Buttons for attendance, Checkboxes for dietary requirements with randomized order to avoid bias,
    Date Picker with an earliest date set
  </li>
</ul>

<h2 id="validation-rules">Validation rules</h2>

<p>
  Validation runs as the respondent fills out your form. formbase highlights bad input inline and refuses to submit until everything passes.
</p>

<h3 id="built-in-validation">Built-in by field type</h3>

<p>
  Each question type checks its own shape, with nothing to configure. <strong>Email</strong> checks the address format.{' '}
  <strong>Website URL</strong> accepts http and https links only and rejects a host that is not a real domain. <strong>Phone Number</strong>{' '}
  checks the number against the selected country. <strong>Number</strong>, <strong>Date Picker</strong>, and <strong>Time Picker</strong>{' '}
  reject anything that is not a number, a date, or a time.
</p>

<p>
  On Business, an email question can additionally require verification — the respondent confirms that address with a one-time code before
  the form accepts the submission. The toggle sits under <strong>Validation → Verification</strong>. See{' '}
  <a href="/building-forms/email-verification">respondent email verification</a>.
</p>

<h3 id="optional-rules">Optional rules per field</h3>

<p>
  Open the block menu and pick <strong>Validation</strong>. The rules on offer depend on the question type; these are the exact menu labels.
</p>

<p>
  Radio Buttons, Dropdown, Toggle Switch, Signature, Ranking, Payment, and Schedule appointment take no validation rules — required or not
  is the only choice. Inside a repeating group, email verification is not offered.
</p>

<h3 id="custom-patterns">Custom pattern examples</h3>

<ul>
  <li>
    <strong>US ZIP code</strong> — <code>{`^\\d{5}(-\\d{4})?$`}</code>
  </li>
  <li>
    <strong>Hex color code</strong> — <code>{`^#[0-9a-fA-F]{6}$`}</code>
  </li>
  <li>
    <strong>URL-friendly slug</strong> — <code>{`^[a-z0-9-]+$`}</code>
  </li>
</ul>

<p>
  A value that doesn't match shows a generic "Invalid value" error, so add a paragraph near the field describing the format you expect. An
  invalid regex is ignored and never blocks submission. Length rules count characters after trimming leading and trailing spaces.
</p>

<h3 id="how-validation-runs">How validation runs</h3>

<p>
  formbase checks validation live in the browser as the respondent types. Format and rule errors appear immediately with an inline message;
  a "This field is required" error appears once the field has been touched, or when the respondent tries to submit.
</p>

> ⚠️ **Don't validate sensitive data with regex alone**
> <p>For things like credit cards or government IDs, use the appropriate field type or integration. Regex catches shape, not validity.</p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Answer piping](/building-forms/answer-piping) — Use @ mentions to reference answers anywhere in your form.
  - [Conditional logic](/building-forms/conditional-logic) — Show or hide fields based on answers
  - [Hidden fields](/building-forms/hidden-fields) — Capture URL parameters invisibly
  - [Calculated fields](/building-forms/calculated-fields) — Compute scores, totals, and dynamic values
</div>
