---
title: "Radio Buttons v2 Component"
slug: "radio-v2-component"
status: "update"
updated: 2026-10-13T15:34:51Z
published: 2026-10-13T15:34:51Z
canonical: "docs.unqork.io/radio-v2-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio v2 Component

The Radio v2 component is an updated Radio component with React-based rendering. It presents a group of mutually exclusive options for end-users to select from, with support for horizontal layout and button group display.

> **How to read settings tables**
> 
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

## General Settings

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Property ID | `key` | Text input | `radioField` | The unique identifier for this component instance. |

## Display Settings

### Field Text

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label Text | `label` | Text input | — | Identifies the component on the canvas and informs end-users what information is requested. |

### Contextual Help

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Tooltip | `description` | Text input | — | A brief description that displays when a cursor is positioned over the tooltip icon. |

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Hide Field | `hidden` | Toggle | OFF | Hides the component from end-users but always displays in the Module Builder. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Horizontal Layout | `inline` | Toggle | OFF | Displays the radio buttons in a horizontal row instead of a vertical list. |
| Show as Button Group | `buttonGroup` | Toggle | OFF | Renders the options as styled button groups instead of traditional radio buttons. |

### Input Behavior

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Behavior | — | Drop-down | **Enable User Input** | Sets how end-users can interact with the field. |

> - **Enable User Input** (default): End-users can select an option.
> - **Disable User Input** (`disabled`): Prevents end-users from selecting an option. The field displays with an altered appearance to indicate it is not editable.
> - **Read Only - Legacy** (`readOnlyView`): Displays the stored value as plain text without the input element. Shows `None` when empty.

## Data Settings

### Data Storage

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Store Data in Database | `persistent` | Toggle | ON | When set to **ON**, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to **OFF** to exclude this field from server-side submissions. |

> [!NOTE]
> Fields with **Store Data in Database** set to **OFF** are excluded from Plug-In component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires **Store Data in Database** set to **ON**.

### Data Source Type

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Data Source Type | — | Radio button | **Values** | Sets how options are populated. |

> **Values** (default): Manually define options using the table below.
> 
> 
> | Column | Field | Type | Description |
> | --- | --- | --- | --- |
> | Label | `label` | Text input | The display text shown to end-users for each option. |
> | Value | `value` | Text input | The value stored in the database when the option is selected. |

> Loads options from another module field. Configure the following settings:
> 
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Data Reference Key | — | Text input | — | The Property ID of the field to reference. |
> | Value Property | — | Text input | — | The property to use as the stored value for each option. |
> | Label Path | — | Text input | — | The property to use as the display label for each option. |

## Actions Settings

### Triggers

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Trigger | `trigger` | Property ID | — | Triggers another component when the selection changes. |

## Validation Settings

### User Input

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Required | `validate.required` | Toggle | OFF | Requires an option to be selected before the module can be submitted. |
| Required Error Message | `errors.required` | Text input | `is required` | Displays when the required field has no selection. |

## Advanced Settings

### Additional Validation Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Require Unique Submission Data | `unique` | Toggle | OFF | Requires the selected value to be unique across all submissions. |

### Additional Styling

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Custom CSS Class | `customClass` | Text input | — | A CSS class applied to the component for custom styling. |

## Operations Builder

This component supports the [Operations Builder](/unqorkai/docs/operations-builder) in Vega modules. When the module or panel runtime is set to **Vega (2.0)**, an **Event Handlers** section displays in the settings panel for configuring event-driven operations.

---

**Changelog**

| Date | Change |
| --- | --- |
| — | Initial publication. |

Rendering is the process of loading components and displaying the final result on the front-end screen.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

The VCS (version control system) Contributor role has permissions to edit modules in a branch. Set contributors during the VCS Create a Branch process.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

A JavaScript property is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.