Radio Field Element
The Radio Field Element adds a group of radio buttons to a Tirenoa Form. The visitor sees all choices at once and can pick exactly one of them, for example a preferred contact method, a department or a yes/no answer.
Because every option is visible without opening a list, radio buttons are the clearest choice for two to about six answers. For longer lists a Select Field saves space, and when visitors may pick several answers a Checkbox Field is the right element.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Radio Field Element
Open your form under Tirenoa > Forms and add the Radio Field Element where the question belongs. Enter a Field Label (the question the visitor reads) and a Field Name in lowercase letters, digits, dashes or underscores. The field name identifies the answer in the form entries and in the notification email; if you leave it empty, the label is used instead. Then add your answers under Options. Each option has a label and an optional value; without a value, the label itself is submitted. Tick the checkbox of an option to preselect it.
Set Field Layout to Stacked for one option per row, or Floated to place short options side by side. The colors, borders and label position (above or below the field) come from the form’s own appearance settings, so all fields of a form look alike. Tooltip Text adds a small question-mark icon next to the label that shows a hint.
Turn on Required Field when the visitor must choose an answer; the label then gets an asterisk and Empty Input Notice sets the message shown when nothing is chosen. The chosen option’s value is stored in the form entries under the field’s label, and you can place it in the notification email with the field name in square brackets, for example [contact_method]. On the Conditionals tab, Conditional Logic shows or hides the whole group based on answers in other fields.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Field Label | Enter the label for the input field. This is how users will identify individual fields. |
| Field Name | Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores. |
| Required Field | Make a selection to ensure that this field is completed before allowing the user to submit the form. |
| Empty Input Notice | Enter text validation notice that should display if data input is empty. |
| Tooltip Text | The text to display as tooltip hint for the input. |
| Options | Add options for the input field. Use the checkbox to preselect a value. |
| Field Layout | Make a selection for field layout. Floated will have them side by side. Stacked will have one per row. |
| Tab Index | Tab index for the form field. |
| CSS Class | Add a class for the form field. |
| CSS ID | Add an ID for the form field. |
Conditionals
| Heading | Description |
|---|---|
| Conditional Logic | Add conditional logic for the input field. |
Tips
- Give options short, clear values if you process the entries later; the visible label can stay longer and more friendly.
- Preselecting an option makes the field always filled in, so Required Field has no effect in that case. Leave all options unticked if you want a conscious choice.
- Use Floated only for a few short options. Long labels side by side wrap unevenly, especially on phones.
- Every field name must be unique within the form. Two fields with the same name overwrite each other’s answer in the entry.
- If you add no options, the field is not shown at all.