Radio

Radio button group for selecting one option from mutually exclusive choices. Use when the user can see all options at once (typically 2‑5 options).

Use Cases

• Mutually exclusive choices (Payment method, Shipping method)
• Yes/No questions with clear options visible
• Type selection (Account type, Membership level)
• Small option lists where all choices should be visible (2‑5 options)

Properties

name

Unique field name. Type: string.

label

Label for the radio group. Type: string.

options

Array of radio options (typically 2‑5 options). Type: array. Minimum items: 2. Maximum items: 10.

Each item is an object with the following properties:

• value – Internal value. Type: string.
• label – Display label shown to user. Type: string.

required

Whether selection is required. Type: boolean. Default: false.

defaultValue

Default selected value (must match one option value). Preselect common/recommended choice (not used when dataBinding is set). Type: string.

layout

Layout direction for radio button options. Type: string. Options: vertical, horizontal. Default: vertical.

Visual Impact: vertical – Radio buttons stacked vertically (default, recommended for best readability). horizontal – Radio buttons arranged horizontally in a row (use for 2‑3 short options).

Recommendations: Use ‘vertical’ for most use cases – easier to scan, better mobile experience. Use ‘horizontal’ only for 2‑3 very short options (Yes/No, Male/Female).

customCss

Custom CSS styles for advanced styling. Parsed as CSS property-value pairs. Type: string.

Tip: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

dataBinding

Data binding configuration to connect radio group to page data source field. Automatically populates selected option and saves changes back to source. Type: object.

• pageDataSourceRef – Reference to page-level data source (format: '@page.{dataSourceId}'). Takes precedence over sourceId/sourceType. Type: string.
• sourceId – ID of the data source (database table or API connection). Type: string. Required.
• sourceType – Type of data source. Type: string. Options: table, api. Required.
• operationType – Operation type – ‘Get’ for single record (input fields use Get). Type: string. Options: Get. Required.
• fieldName – Name of the field/column to bind to. Type: string. Required.
• isReadOnly – Whether radio group is read-only (display only, no write back). Type: boolean. Default: false.
• writeOperation – Write operation type when saving changes. Type: string. Options: Create, Update. Default: Update.

Best Practices

• Use Radio for 2‑5 mutually exclusive options – use Dropdown for 6+ options
• Provide clear option labels that describe each choice
• Stack radio options vertically for best readability
• Set defaultValue to preselect common/recommended choice
• Use for choices where seeing all options helps decision (unlike hidden dropdown)

Common Mistakes

Using Radio for 10+ options

Why it's a problem: Too many radio buttons clutters UI, hard to scan, wastes vertical space

Fix: Use Dropdown for 6+ options, Radio for 2‑5 options

Not setting defaultValue for common/recommended choice

Why it's a problem: User forced to make selection even when one option is typical – adds friction

Fix: Set defaultValue to most common choice (e.g., ‘standard’ shipping, ‘personal’ account)

Using Radio when Dropdown would be better

Why it's a problem: Radio wastes space for options that don’t need to be visible simultaneously

Fix: Use Radio when seeing all options helps decision, Dropdown for routine selections