Let the visitor pick one option from a list. The selected value is stored as a variable for formulas and conditional logic.
In the builder: Elements → Form Widgets → Radio
Widget Settings
Variable
| UI field | Description |
|---|---|
| Name | Variable name (required), e.g. plan_type, payment_method. |
| Value | Default selected option value. |
Type
| Option | Layout |
|---|---|
| radio | Options stacked vertically |
| radio_inline | Options in a horizontal row |
| radio_image | Options with an image above each choice |
Options
Click Edit Options to add choices. Each option has a value (stored in formulas) and caption (shown to the visitor). For radio_image, add an image URL per option.
Field Option
| UI field | Description |
|---|---|
| Label | Question or group label above the options. |
| Status | See Status below. |
Status
| Value | Behavior |
|---|---|
| Editable | Visitor can type and change the value (default). |
| Readonly | Value is visible and included in formulas, but the visitor cannot edit it. |
| Disabled | Field is greyed out and inactive. The visitor cannot interact with it; use when the field should not apply in the current context. |
Validation
| UI field | Options | Purpose |
|---|---|---|
| Required | Required / Optional |
Visitor must select an option. |
On Change
Run actions when the selection changes — e.g. switch View Mode or run Calculate. Click Add action.
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field | Description |
|---|---|
| Show | Always or Conditionally |
| Active mode is | Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive | Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part | What it represents |
|---|---|
| Label | Group label above the radio list. |
| Control Area | Region containing all options. |
| Radio Option | Each individual radio button and its caption (or image). |
Custom CSS — useful selectors and classes:
| Selector / class | Targets |
|---|---|
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes | Classes you add in Design; applied to the outer widget container. |
.cp-radio-block |
Block layout container. |
.cp-inline-block |
Inline option wrapper. |
.cp-radio-image |
Image-style radio option. |
Using the value in formulas
Compare or branch on the selected value, e.g. = IF(plan_type = 1, basic_price, premium_price).
Radio vs Checkbox vs Select
| Radio | Checkbox | Select | |
|---|---|---|---|
| Selection | One option | Multiple options | One option (dropdown) |
| Display | Visible options | Visible checkboxes | Collapsed list |
| Best for | 2–6 clear choices | Add-ons, features | Long option lists |
Use Radio when all choices should be visible and only one can be selected.