Skip to main content

Radio Button Component

1. Introduction​

The Radio Button component is a user interface element that allows users to select one option from a predefined list of choices. It is commonly used in forms, surveys, and settings where a single selection is required. The component is highly customizable, offering options for styling, layout, and behavior.

Purpose and Use Cases​

  • Purpose: The Radio Button component is used to present a list of mutually exclusive options to users, allowing them to select only one.
  • Primary Use Cases:
    • Forms and surveys requiring single-choice answers.
    • Settings pages where users need to select one configuration option.
    • Navigation menus or filters with exclusive options.

Benefits​

  • User-Friendly: Provides a clear and intuitive way for users to make a single selection.
  • Customizable: Fully configurable properties, styles, and layout options.
  • Responsive Design: Works seamlessly across desktop, tablet, and mobile devices.
  • Improved Accessibility: Ensures clarity and ease of use for all users.

2. Properties​

The Radio Button component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Label​

  • Description: The text label displayed above or beside the radio button group.
  • Purpose: Provides context for the user about the purpose of the radio button group.
  • Required/Optional: Optional

Choices​

  • Description: A list of available options for the radio button group.
  • Purpose: Defines the options that users can select from.
  • Default: 2 choices
  • Sub-Properties:
    • Code: A unique identifier for each choice.
    • Label: The text displayed for each choice.
    • Arrows: Allows drag-and-drop to change the priority/order of choices.
    • Cross: Deletes the option.
    • Chevron: Collapses the option visually.
    • Button "Add Choice": Adds a new option to the radio button list.
    • Answer: Specifies which choice is selected by default.
  • Required/Optional: Required

Answer​

  • Description: The selected option's code.
  • Purpose: Captures the user's selection for processing or storage.
  • Sub-Property:
    • Reset Button: Resets the selection to blank.
  • Required/Optional: Optional

Mandatory Field​

  • Description: Specifies whether the radio button group is required.
  • Purpose: Ensures that users make a selection before proceeding.
  • Default: OFF
  • Required/Optional: Optional

Help​

  • Description: Displays a help message for the radio button group.
  • Purpose: Provides additional guidance or context for the user.
  • Default: OFF
  • Sub-Property:
    • Help Message: A textbox to input the help text.
  • Required/Optional: Optional

Enabled​

  • Description: Determines whether the radio button group is active or disabled.
  • Purpose: Controls the availability of the radio button group to users.
  • Default: ON
  • Required/Optional: Optional

3. Style​

The Radio Button component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the radio button group's dimensions.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the radio button group (default: 0).
  • Fixed Position: Locks the radio button group's position on the screen (default: OFF).
  • Hidden: Hides the radio button group from view (default: OFF).

Border​

  • Reset: Resets border settings to default.
  • Options: Normal, On Hover.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Padding​

  • Reset: Resets padding settings to default.
  • Options: Normal, On Hover.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the radio button group is hovered.

Label Style​

  • Reset: Resets label font settings to default.
  • Options: Normal, On Hover, On Focus.
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).
    • Margin: Left, right, top, bottom, or all around (size in pixels).

Answer Style​

  • Reset: Resets answer font settings to default.
  • Options: Same as Label Style.

Radio Button​

  • Selected Color: Color when the radio button is selected (default: #ffffff).
  • Unselected Color: Color when the radio button is unselected (default: #ffffff).

Columns​

  • Number of Columns: Specifies how many columns to use for displaying the radio buttons (default: 1).
  • Column Gutter: Space between columns, expressed in pixels (default: 1).

4. Best Practices for UI/UX​

When and Why to Use​

  • Use the Radio Button component to present mutually exclusive options in forms or settings.
  • Ideal for scenarios where only one selection is allowed, such as gender selection, payment methods, or subscription plans.

Effective Scenarios​

  • Desktop: Use for forms or settings with clear labels and sufficient spacing.
  • Tablet/Smartphone: Ensure the radio buttons are responsive and easy to tap.

Tips for Optimal Use​

  • Keep the number of options manageable to avoid overwhelming users.
  • Use clear and concise labels for each choice.
  • Group related options together for better usability.

5. Security Considerations​

Potential Risks​

  • Data Validation: Ensure that the selected option is validated to prevent invalid inputs.
  • External Resources: Validate any external resources used for styling or functionality.

Best Practices​

  • Use HTTPS for secure communication when transmitting user selections.
  • Validate and sanitize all user inputs to prevent injection attacks.
  • Ensure the radio button group is accessible and follows ARIA guidelines for better usability.

This documentation provides a comprehensive guide to the Radio Button component, ensuring developers and non-technical users can effectively implement and customize it in their applications.