Skip to Content
Dashflow Logo

RadioGroup Component

A comprehensive guide to using the RadioGroup component with examples, props, and best practices.

Overview

The RadioGroup component provides a set of radio buttons that allow users to select a single option from multiple choices. It's designed for forms and settings where only one option can be selected.

Basic Usage

import { RadioGroup } from '@dashflowx/core'


export default function RadioGroupExample() {
  const items = [
    { id: 'option1', title: 'Option 1', value: 'option1' },
    { id: 'option2', title: 'Option 2', value: 'option2' },
    { id: 'option3', title: 'Option 3', value: 'option3' }
  ];


  return (
    <RadioGroup 
      items={items}
      defaultValue="option1"
    />
  )
}

Preview:

Props

PropTypeDefaultDescription
itemsArray<iRadioGroupItem>[]Array of radio button items
defaultValuestring-Default selected value
classNamestring''Additional CSS classes

Radio Group Item Structure

interface iRadioGroupItem {
  id: string;
  title: string;
  value: string;
  handleClick?: any;
}

Examples

Basic Radio Group

import { RadioGroup } from '@dashflowx/core'


export default function BasicRadioGroup() {
  const items = [
    { id: 'option1', title: 'Option 1', value: 'option1' },
    { id: 'option2', title: 'Option 2', value: 'option2' },
    { id: 'option3', title: 'Option 3', value: 'option3' }
  ];


  return (
    <RadioGroup 
      items={items}
      defaultValue="option1"
    />
  )
}

Preview:

Custom Styled Radio Group

import { RadioGroup } from '@dashflowx/core'


export default function CustomStyledRadioGroup() {
  const items = [
    { id: 'option1', title: 'Option 1', value: 'option1' },
    { id: 'option2', title: 'Option 2', value: 'option2' },
    { id: 'option3', title: 'Option 3', value: 'option3' }
  ];


  return (
    <RadioGroup 
      items={items}
      defaultValue="option1"
      className="border border-blue-500 rounded-lg p-4"
    />
  )
}

Preview:

Form Radio Group

import { RadioGroup } from '@dashflowx/core'


export default function FormRadioGroup() {
  const items = [
    { id: 'male', title: 'Male', value: 'male' },
    { id: 'female', title: 'Female', value: 'female' },
    { id: 'other', title: 'Other', value: 'other' }
  ];


  return (
    <RadioGroup 
      items={items}
      defaultValue="male"
    />
  )
}

Preview:

Settings Radio Group

import { RadioGroup } from '@dashflowx/core'


export default function SettingsRadioGroup() {
  const items = [
    { id: 'light', title: 'Light Theme', value: 'light' },
    { id: 'dark', title: 'Dark Theme', value: 'dark' },
    { id: 'auto', title: 'Auto', value: 'auto' }
  ];


  return (
    <RadioGroup 
      items={items}
      defaultValue="auto"
    />
  )
}

Preview:

Language Selection

import { RadioGroup } from '@dashflowx/core'


export default function LanguageSelection() {
  const items = [
    { id: 'en', title: 'English', value: 'en' },
    { id: 'es', title: 'Spanish', value: 'es' },
    { id: 'fr', title: 'French', value: 'fr' },
    { id: 'de', title: 'German', value: 'de' }
  ];


  return (
    <RadioGroup 
      items={items}
      defaultValue="en"
    />
  )
}

Preview:

Common Use Cases

Form Gender Selection

const genderSelection = (
  <RadioGroup 
    items={[
      { id: 'male', title: 'Male', value: 'male' },
      { id: 'female', title: 'Female', value: 'female' },
      { id: 'other', title: 'Other', value: 'other' }
    ]}
    defaultValue="male"
  />
);

Theme Selection

const themeSelection = (
  <RadioGroup 
    items={[
      { id: 'light', title: 'Light', value: 'light' },
      { id: 'dark', title: 'Dark', value: 'dark' },
      { id: 'auto', title: 'Auto', value: 'auto' }
    ]}
    defaultValue="auto"
  />
);

Language Selection

const languageSelection = (
  <RadioGroup 
    items={[
      { id: 'en', title: 'English', value: 'en' },
      { id: 'es', title: 'Spanish', value: 'es' },
      { id: 'fr', title: 'French', value: 'fr' }
    ]}
    defaultValue="en"
  />
);

Size Selection

const sizeSelection = (
  <RadioGroup 
    items={[
      { id: 'small', title: 'Small', value: 'small' },
      { id: 'medium', title: 'Medium', value: 'medium' },
      { id: 'large', title: 'Large', value: 'large' }
    ]}
    defaultValue="medium"
  />
);

Best Practices

1. Clear Labels

Use clear and descriptive labels for radio options.

// ✅ Good - Clear labels
const items = [
  { id: 'light', title: 'Light Theme', value: 'light' },
  { id: 'dark', title: 'Dark Theme', value: 'dark' }
];


// ❌ Avoid - Unclear labels
const items = [
  { id: 'opt1', title: 'Option 1', value: 'opt1' },
  { id: 'opt2', title: 'Option 2', value: 'opt2' }
];

2. Logical Default Values

Set logical default values based on context.

// ✅ Good - Logical default
<RadioGroup defaultValue="auto" />


// ❌ Avoid - Random default
<RadioGroup defaultValue="option2" />

3. Consistent Spacing

Maintain consistent spacing between radio options.

// ✅ Good - Consistent spacing
<RadioGroup className="space-y-2" />


// ❌ Avoid - Inconsistent spacing
<RadioGroup className="space-y-1" />

4. Accessible Labels

Ensure all radio options have proper labels.

// ✅ Good - Proper labels
const items = [
  { id: 'option1', title: 'Option 1', value: 'option1' }
];


// ❌ Avoid - Missing labels
const items = [
  { id: 'option1', title: '', value: 'option1' }
];

5. Unique IDs

Use unique IDs for each radio option.

// ✅ Good - Unique IDs
const items = [
  { id: 'theme-light', title: 'Light', value: 'light' },
  { id: 'theme-dark', title: 'Dark', value: 'dark' }
];


// ❌ Avoid - Duplicate IDs
const items = [
  { id: 'option', title: 'Light', value: 'light' },
  { id: 'option', title: 'Dark', value: 'dark' }
];

Customization

Custom Styling

You can customize the radio group appearance using CSS classes:

<RadioGroup 
  items={items}
  defaultValue="option1"
  className="border border-gray-300 rounded-lg p-4"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<RadioGroup className="bg-white border-gray-200" />


// Dark theme
<RadioGroup className="bg-gray-900 border-gray-700 text-white" />


// Brand theme
<RadioGroup className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small radio group
<RadioGroup className="text-sm" />


// Standard radio group
<RadioGroup className="text-base" />


// Large radio group
<RadioGroup className="text-lg" />

Advanced Usage

Dynamic Radio Options

Load radio options dynamically:

const [radioOptions, setRadioOptions] = useState([]);


useEffect(() => {
  // Load options based on user permissions
  loadRadioOptions().then(setRadioOptions);
}, []);

Conditional Radio Options

Show/hide radio options based on conditions:

const getRadioOptions = (userRole) => {
  const baseOptions = [
    { id: 'basic', title: 'Basic', value: 'basic' }
  ];
  
  if (userRole === 'admin') {
    baseOptions.push({ id: 'admin', title: 'Admin', value: 'admin' });
  }
  
  return baseOptions;
};

Radio Group State Management

Handle radio group state:

const [selectedValue, setSelectedValue] = useState('option1');


const handleRadioChange = (value) => {
  setSelectedValue(value);
  // Handle value change
};
  • Checkbox: For multiple selections
  • Switch: For toggle options
  • Select: For dropdown selections
  • Form: For form containers
  • Label: For form labels

API Reference

For the complete API reference and advanced usage patterns, see the RadioGroup API documentation.

Edit this page on GitHub
previousLabel