Fluxo UIFluxo UIv0.4.1

RadioButtonGroup

A radio button group component for selecting a single option from multiple choices.

Basic Usage

Basic Radio Button Group

Basic Example
import { RadioButtonGroup } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState('option2');

  const options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
    { label: 'Disabled Option', value: 'disabled', disabled: true }
  ];

  return (
    <RadioButtonGroup
      label="Choose an option"
      items={options}
      value={value}
      onChange={setValue}
    />
  );
}

Horizontal Layout

Horizontal Radio Group

const priorityOptions = [
  { label: 'Low', value: 'low' },
  { label: 'Medium', value: 'medium' },
  { label: 'High', value: 'high' }
];

<RadioButtonGroup
  label="Priority Level"
  items={priorityOptions}
  value={value}
  onChange={setValue}
  orientation="horizontal"
/>

States

Radio Button States

<RadioButtonGroup
  label="Normal State"
  items={options}
  value="md"
/>
<RadioButtonGroup
  label="Disabled State"
  items={options}
  value="low"
  disabled
/>
<RadioButtonGroup
  label="Required Field"
  items={options}
  required
/>
<RadioButtonGroup
  label="With Error"
  items={options}
  error="Please select an option"
/>

Controlled vs Uncontrolled

Controlled vs Uncontrolled

Controlled (with state)

Selected: medium

Uncontrolled (default value)

// Controlled
const [value, setValue] = useState('medium');

<RadioButtonGroup
  items={options}
  value={value}
  onChange={setValue}
/>

// Uncontrolled
<RadioButtonGroup
  items={options}
  value="high"
/>

Import

import { RadioButtonGroup } from 'fluxo-ui';

Props

itemsreq
ListItem[]

Array of radio button items with label, value, and optional disabled property

value
string

Currently selected value (controlled component)

onChange
function

Change event handler - receives ComponentEvent with selected value

name
string

Name attribute for the radio group

args
any

Custom arguments passed through to onChange event

label
string

Label for the radio group

disabled
booleanfalse

Disable all radio buttons

required
booleanfalse

Mark the group as required

error
string

Error message to display

orientation
string"vertical"

Layout orientation (vertical or horizontal)

ariaLabel
string

Accessible label for the radiogroup

ariaLabelledBy
string

ID of the element that labels the radiogroup

ariaDescribedBy
string

ID(s) of element(s) that describe the radiogroup (hint or error text). Auto-set by FieldLabel.

invalid
boolean

Marks the group as invalid (sets aria-invalid)

className
string

Additional CSS classes

Features

Single Selection

Enforces exactly one selection at a time from a set of mutually exclusive options

Vertical & Horizontal

Supports both vertical (stacked) and horizontal (inline) orientations via the orientation prop

Per-Item Disabled

Individual items can be disabled independently while the rest of the group remains interactive

Full Group Disable

The disabled prop disables all radio buttons in the group at once for easy form-level control

Validation Support

Built-in required and error props for form validation with visible error message display

Controlled Component

Fully controlled via value and onChange — works as both controlled and uncontrolled inputs

Accessibility

Uses native radio input semantics with proper grouping, keyboard navigation, and ARIA labels

Theming

Full dark/light and 5 brand themes supported via CSS variables with zero extra configuration