The RadioGroup component in goobs-frontend is a customizable set of radio buttons that allows users to select a single option from a list of choices. It provides a user-friendly interface for exclusive selection with various styling options.

To use the RadioGroup component in your project, import it from the goobs-frontend package:

import { RadioGroup } from 'goobs-frontend';

Here's a basic example of how to use the RadioGroup component:

import React from 'react';
import { RadioGroup } from 'goobs-frontend';

const RadioGroupExample: React.FC = () => {
  const options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ];

  return (
    <RadioGroup
      label="Select an option"
      options={options}
      name="example-radio-group"
    />
  );
};

export default RadioGroupExample;

The RadioGroup component accepts the following props:

• label: string (optional) - The label for the entire radio group.
• options: RadioOption[] (required) - An array of options for the radio buttons.
• defaultValue: string (optional) - The default selected value.
• name: string (required) - The name attribute for the radio button group.
• labelFontVariant: string (optional) - The font variant for the label.
• labelFontColor: string (optional) - The font color for the label.
• labelText: string (optional) - Alternative text for the label.

Each RadioOption in the options array should have the following properties:

• label: string - The text label for the radio button.
• value: string - The value associated with the radio button.
• fontColor: string (optional) - The font color for this specific option.
• fontVariant: string (optional) - The font variant for this specific option.

1. Customizable Options: Supports an array of options with labels and values.
2. Styling Customization: Allows customization of font colors and variants for labels and options.
3. Accessibility: Includes proper labeling and ARIA attributes for screen readers.
4. Default Selection: Supports setting a default selected value.
5. Grouping: Automatically groups radio buttons for exclusive selection.

You can customize the appearance of the RadioGroup component using the provided props. Here's an example with custom styling:

import React from 'react';
import { RadioGroup } from 'goobs-frontend';

const StyledRadioGroupExample: React.FC = () => {
  const options = [
    { label: 'Red', value: 'red', fontColor: '#ff0000' },
    { label: 'Green', value: 'green', fontColor: '#00ff00' },
    { label: 'Blue', value: 'blue', fontColor: '#0000ff' },
  ];

  return (
    <RadioGroup
      label="Choose a color"
      options={options}
      name="color-selection"
      labelFontVariant="h6"
      labelFontColor="#333"
    />
  );
};

export default StyledRadioGroupExample;

You can integrate the RadioGroup component with form libraries like Formik or react-hook-form. Here's an example using react-hook-form:

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { RadioGroup } from 'goobs-frontend';

const FormIntegrationExample: React.FC = () => {
  const { control, handleSubmit } = useForm();

  const options = [
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' },
  ];

  const onSubmit = (data) => {
    console.log('Selected option:', data.radioOption);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="radioOption"
        control={control}
        defaultValue=""
        rules={{ required: 'Please select an option' }}
        render={({ field, fieldState: { error } }) => (
          <RadioGroup
            label="Select an option"
            options={options}
            name={field.name}
            defaultValue={field.value}
            onChange={field.onChange}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormIntegrationExample;

You can create a RadioGroup with dynamically generated options:

import React, { useState, useEffect } from 'react';
import { RadioGroup } from 'goobs-frontend';

const DynamicRadioGroupExample: React.FC = () => {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    // Simulating an API call to fetch options
    const fetchOptions = async () => {
      const response = await fetch('https://api.example.com/options');
      const data = await response.json();
      setOptions(data.map(item => ({ label: item.name, value: item.id })));
    };

    fetchOptions();
  }, []);

  return (
    <RadioGroup
      label="Select an item"
      options={options}
      name="dynamic-options"
    />
  );
};

export default DynamicRadioGroupExample;

The RadioGroup component is designed with accessibility in mind:

• It uses proper aria-labelledby attributes to associate the group label with the radio buttons.
• Each radio button is properly labeled for screen readers.
• The component supports keyboard navigation.

To further enhance accessibility:

1. Ensure that color is not the only means of conveying information (for color-coded options).
2. Provide clear and concise labels for each option.
3. Consider adding additional context or instructions if the purpose of the selection is not immediately clear.

1. Clear Labels: Use descriptive labels for both the group and individual options.
2. Logical Ordering: Order your options in a logical manner (e.g., alphabetically or by relevance).
3. Appropriate Use: Use radio buttons when only one selection is allowed from a list of options.
4. Default Selection: Consider providing a default selection when appropriate.
5. Vertical Alignment: Generally, align radio buttons vertically for better readability.

The RadioGroup component is generally lightweight, but keep in mind:

• For large sets of options, consider implementing virtualization techniques.
• If options are fetched from an API, implement proper loading states and error handling.

1. Options Not Displaying: Ensure the options prop is correctly formatted as an array of objects with label and value properties.
2. Styling Issues: Check that custom font variants and colors are correctly applied and not conflicting with global styles.
3. Selection Not Working: Verify that the name prop is unique within your form or page to ensure proper grouping of radio buttons.

By leveraging these features and following the best practices, you can effectively use the RadioGroup component in your goobs-frontend projects to create user-friendly selection interfaces for exclusive choices.