Radio group

Properties Overview

• native (Boolean): Determines if the radio buttons should use native HTML elements or custom components.

• name (String): Unique name for the radio group.

• label (Object): Styling options for the labels of the radio buttons.

  • fontFamily (String): Font family for the label text.

  • color (Color): Color of the label text.

  • fontSize (Number): Font size of the label text.

• defaultOption (String): The default selected option's value.

• options (Array): Array of options for the radio buttons.

  • label (String): Label for the radio option.

  • value (String): Value for the radio option.

• layout (Object): Layout configuration for arranging the radio buttons.

  • direction (Enum): Direction of the radio buttons (row or column).

  • distribute (Enum): Distribution of the radio buttons within the container (start, center, end, space-between, space-around, space-evenly).

  • align (Enum): Alignment of the radio buttons within the container (start, center, end).

  • wrap (Boolean): Determines if the radio buttons should wrap to the next line.

  • gap (Number): Gap between each radio button.

• checkedComponent (ComponentInstance): Custom component to display when a radio button is selected.

• uncheckedComponent (ComponentInstance): Custom component to display when a radio button is not selected.

Implementation Example

Basic Setup

To integrate the RadioGroup component into your Framer project, insert it into your design and configure the properties as needed. Here’s a basic example:

 <RadioGroup
    name="example-radio-group"
    defaultOption="2"
    options={[
      { label: "Option 1", value: "1" },
      { label: "Option 2", value: "2" },
      { label: "Option 3", value: "3" },
    ]}
    layout={{
      direction: "row",
      distribute: "start",
      align: "center",
      wrap: true,
      gap: 10,
    }}
    label={{
      fontFamily: "Arial",
      color: "#333333",
      fontSize: 16,
    }}
    checkedComponent={<SelectedIcon />}  // Replace with your custom selected component
    uncheckedComponent={<UnselectedIcon />}  // Replace with your custom unselected component
    native={false}
  />

Notes

• Native Property: Set the native property to true to use standard HTML radio buttons, or false to use custom components for selected and unselected states.

• Layout Customization: Use the layout property to arrange radio buttons in rows or columns, control their alignment, and adjust spacing.

• Default Option: Specify the defaultOption to pre-select an option when the component loads.

• Event Handling: Utilize the onChange function to perform actions when a radio button is selected, such as updating state or logging the selected value.

• Styling Labels: Customize the appearance of radio button labels using the properties within the label object to match your design preferences.