RadioGroup

Radio button group for single-choice selection. Renders options vertically by default, supports horizontal row layout, and integrates with DashForm automatically. Registration, validation, error handling, reactive visibility, and RBAC orchestration are handled internally by the component. The component is designed for form-driven workflows involving mutually exclusive selections rather than standalone state orchestration. The name prop is required to connect the field to the form schema and the internal form engine.

Quick Start

const options = [
  { value: 'yes', label: 'Yes' },
  { value: 'no', label: 'No' },
];

<RadioGroup
  name="answer"
  label="Do you agree?"
  options={options}
  rules={{ required: 'Please select an option' }}
/>

Examples

A radio group bound to the form by name. The form stores the selected option's value.

<RadioGroup
  name="answer"
  label="Do you agree?"
  options={[
    { value: 'yes', label: 'Yes' },
    { value: 'no', label: 'No' },
    { value: 'maybe', label: 'Maybe' },
  ]}
/>

row lays the options out horizontally — good for short, scannable choices.

<RadioGroup
  name="size"
  label="Size"
  row
  options={[
    { value: 'xs', label: 'XS' },
    { value: 's', label: 'S' },
    { value: 'm', label: 'M' },
    { value: 'l', label: 'L' },
    { value: 'xl', label: 'XL' },
  ]}
/>

Error state with helper text.

<RadioGroup
  name="answer"
  label="Do you agree?"
  error
  helperText="Please select an option"
  options={[
    { value: 'yes', label: 'Yes' },
    { value: 'no', label: 'No' },
  ]}
/>

API

Notes

• Individual options can be disabled via options[n].disabled.
• The stored form value is the selected option's value string.

Capabilities

RadioGroup supports progressive adoption — use it as a standalone controlled input, integrate with React Hook Form, or conditionally show it based on other form state.

Controlled

RadioGroup works as a standard React controlled component with familiar patterns. No proprietary lock-in required.

• Standard value and onChange props
• No proprietary lock-in
• Easy incremental adoption

<RadioGroup
  value={accountType}
  onChange={(e) => setAccountType(e.target.value)}
  name="accountType"
  options={[
    { value: 'personal', label: 'Personal' },
    { value: 'business', label: 'Business' }
  ]}
/>

React Hook Form Ready

Integration-Friendly

Designed to integrate with React Hook Form workflows through DashForm. Compatible with existing form-library patterns.

• Works through DashForm bridge
• Validation and error handling supported
• Fits existing RHF workflows

<DashForm>
  <RadioGroup
    name="shippingMethod"
    label="Shipping Method"
    options={shippingOptions}
    rules={{ required: 'Please select a method' }}
  />
</DashForm>

Reactive Visibility

RadioGroup can participate in engine-driven visibility rules through visibleWhen. Use it when single-choice depends on other form state.

• Conditional rendering via visibleWhen
• Engine evaluates the predicate
• Useful for dependent choice fields

<RadioGroup
  name="businessType"
  label="Business Type"
  options={businessTypes}
  visibleWhen={(engine) =>
    engine.getNode('accountType')?.value === 'business'
  }
/>

RBAC Access Control

Declarative role-based access control via the access prop. The component calls useAccessState(access) internally and maps the resolved permission to one of three field states — no if statements or manual checks needed in the parent.

The access prop accepts an AccessRequirement object:

RBAC access control requirement for a specific option.

Group level

Group-level access has precedence over option-level access. Combines with explicit disabled prop via OR logic.

Option level

Controls option visibility and selectability basesd on user permissions: