doc-burger

Radio Group

A component allowing for data entry through the selection of an option from a set of mutually exclusive choices

A radio group is a user interface element that allows users to select a single option from a set of mutually exclusive choices, offering options for controlling its behavior and appearance.

radio-group component of Peaka

Key Features

Radio groups offer the following key features:

  • Value: The value of a radio group represents the selected option's value. Users can choose one option from the group.

  • Options: The "Options" input allows you to define the available options for selection. Each option should be an object within an array.

  • Option Label: The "Option Label" property specifies the label or display text for each option.

  • Option Value: The "Option Value" property assigns a value to each option.

  • Disabled: When switched on, the "Disabled" property makes the radio group unchangeable, preventing user interaction.

  • Styles: Customize the initial styles of the radio group to align with your application's design.

How to Use Radio Groups

To use radio groups in your application, follow these steps:

  1. Value: Utilize the "Value" property to set or retrieve the selected option's value from the radio group.

  2. Options: Define the available options using the "Options" input, and configure each option with labels and values.

  3. Option Label: Add descriptive labels next to each radio button to provide context for the user.

  4. Option Value: Assign values to each option to represent their selection.

  5. Disabled State: Use the "Disabled" property to make the entire radio group unchangeable when necessary.

Use Cases

Radio groups are commonly used in various scenarios, including:

  • Survey and Feedback Forms: Use radio groups in survey forms or feedback collection applications to present users with clear and concise options for their responses.

  • Product Selection: E-commerce platforms often use radio groups for product selection, where each radio group button represents a specific product option.