RadioButtonGroup

Reference

• The RadioButtonGroup component is use to display a group of radio buttons with labels, allowing users to select one option from a list.
• It supports customization of layout, styles, and disabled states.

Props

1. options

   • Type: Array
   • Description: An array of objects representing the radio button options. Each object should include:
     • name: The value of the option.
     • displayName: The label text for the option.
     • disabled: (Optional) Whether the option is disabled.

2. value

   • Type: string
   • Description: The currently selected option's name.

3. onEdit

   • Type: function
   • Description: Callback triggered when the selected option changes. Receives the new value as an argument.

4. direction

   • Type: string
   • Default: 'column'
   • Description: Sets the layout direction of the radio buttons ('column' or 'row').

5. style

   • Type: object
   • Default: {}
   • Description: Custom styles for the radio buttons.

6. labelStyle

   • Type: object
   • Default: {}
   • Description: Custom styles for the labels.

7. radioBtnGroupStyle

   • Type: object
   • Default: { alignItems: 'center' }
   • Description: Custom styles for the container of each radio button and label.

8. disabled

   • Type: boolean
   • Default: false
   • Description: Disables all radio buttons in the group if true.

Usage Example

import { RadioButtonGroup } from './RadioButtonGroup';

function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { RadioButtonGroup } = protrakComponents;

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

    return (
        <RadioButtonGroup
        options={options}
        value="option1"
        onEdit={(newValue) => console.log('Selected:', newValue)}
        direction="row"
        />
    );
};

• This renders a horizontal group of radio buttons with one disabled option. It logs the selected value when a radio button is clicked.