Radio Group

The Radio Group element allows you to create sets of radio buttons where users can select only one option at a time. It's perfect for forms, surveys, settings panels, and any scenario where you need users to make a single choice from multiple options.

Features

• Single selection: Only one radio button can be selected at a time within the group
• Dynamic data binding: Connect to collections or define static options with custom labels and values
• Flexible layouts: Choose between horizontal or vertical arrangements with customizable spacing
• Form integration: Works seamlessly with form validation and submission workflows

Getting started

Using AI

The quickest way to set up a Radio Group is by using AI:

1. Ask AI to add a radio group. Make sure to specify:

   • The options you want to include
   • Layout preferences (horizontal or vertical)
   • Any specific styling requirements

   Example prompt: "Add a radio group with options for Small, Medium, and Large sizes arranged horizontally"

2. The AI will create your styled radio group with the specified options

3. Continue refining your radio group by asking AI for specific modifications:

   • "Make the radio buttons arrange vertically with more spacing"
   • "Change the options to Yes/No/Maybe"
   • "Connect this radio group to my products collection"

Manual setup

1. Add the Radio Group element to your page from the Add panel
2. Configure your options in the Choices values property - you can either:
   • Define static options with custom labels and values
   • Bind to a collection for dynamic options
3. Set the Init value to specify which option should be selected by default
4. Choose your layout direction (Vertical or Horizontal) in the styling section
5. Adjust spacing with Rows gap and Columns gap properties

Configuring radio options

Static options

For fixed sets of choices, define options directly in the Choices values property:

1. Click the Choices values property
2. Add each option with:
   • Label: The text displayed to users
   • Value: The underlying value sent when the option is selected
3. Use different labels and values when you need user-friendly display text with specific data values

Dynamic options from collections

When your options come from a database or collection:

1. Bind the Choices values property to your collection
2. Set the Label field to specify which property contains the display text
3. Set the Value field to specify which property contains the option values
4. The radio group will automatically update when your collection changes

Layout and styling

Direction and spacing

Control how your radio buttons are arranged:

• Direction: Choose Vertical for stacked buttons or Horizontal for side-by-side layout
• Rows gap: Adjust vertical spacing between radio buttons
• Columns gap: Control horizontal spacing when using horizontal layout
• Wrap elements: Allow radio buttons to wrap to new lines in horizontal layouts

Alignment options

Fine-tune the positioning of your radio buttons:

• Justify: Control how buttons are distributed along the main axis (start, center, end, space-around, space-between)
• Alignment: Set how buttons align along the cross axis (start, center, end, stretch, baseline)

Form integration

Validation

Make your radio group required for form validation:

1. Enable the Required property
2. Users must select an option before the form can be submitted
3. The validation works with WeWeb's form submission workflows

Default values

Set an initial selection with the Init value property:

• Enter the exact value (not the label) of the option you want selected by default
• Leave empty if no initial selection is needed
• The value will automatically trigger the On Init value change event

Example use cases

Product size selector

Create a size selector for an e-commerce product page:

1. Set up options with values like "S", "M", "L", "XL" and labels like "Small", "Medium", "Large", "Extra Large"
2. Use horizontal layout with center alignment
3. Connect the selected value to your cart or product configuration

Survey questions

Build survey forms with single-choice questions:

1. Bind options to a collection containing your question choices
2. Use vertical layout for better readability
3. Make the field required to ensure complete responses
4. Use the On Change event to save responses automatically

Settings panels

Create configuration interfaces with radio button options:

1. Define options for different modes or preferences
2. Use the selected value to control other elements' behavior
3. Set a sensible default with the Init value property

Quiz applications

Build interactive quizzes with single-answer questions:

1. Create dynamic options from your quiz data collection
2. Use the On Change event to track user selections

Preference selectors

Allow users to choose from predefined preferences:

1. Set up options like "Light", "Dark", "Auto" for theme selection
2. Use the selected value to control your app's appearance
3. Persist the selection in user preferences or local storage

Best practices

Do:

• Use clear, concise labels that make the choice obvious
• Set reasonable default values when appropriate
• Test your radio groups across different screen sizes
• Use consistent styling across similar radio groups in your app

Don't:

• Create radio groups with too many options (consider dropdowns for 6+ choices)
• Use radio buttons when multiple selection is needed (use checkboxes instead)
• Make labels too long or confusing
• Forget to handle the case where no option is selected

Forking

While the Radio Group element offers extensive built-in customization options, there may be cases where you need functionality beyond what's natively available. In these situations, you can fork the element and modify it to meet your specific requirements.

If you are unsure how to fork an element, you can learn more in the dedicated documentation.

Forking example: Custom radio button styles

One reason to fork the Radio Group would be to create completely custom radio button designs:

Adjust the radio group element and modify the styling to use custom icons instead of standard radio buttons.

This would allow you to create radio groups with custom icons.

Settings

Property	Options/Type	Description
Choices values	Array	The options available for selection. Can be static array or bound to collection
Init value	Text	The default selected value when the radio group first loads
Label field	Object Property	When bound to collection, specifies which field contains the display text
Value field	Object Property	When bound to collection, specifies which field contains the option values
Required	Boolean	Whether a selection is required for form validation

Styling

Property	Description
Direction	Layout direction - Vertical or Horizontal
Rows gap	Vertical spacing between radio button rows
Columns gap	Horizontal spacing between radio button columns
Justify	How radio buttons are distributed along main axis
Alignment	How radio buttons align along cross axis
Wrap elements	Whether horizontal radio buttons wrap to new lines

Event triggers

Event	Description	Payload
On Change	Triggered when user selects a different option	{ value }
On Init value change	Triggered when the initial value is set or changed	{ value }

Example event payloads

On Change

{
  "value": "selected_option_value"
}

On Init value change

{
  "value": "initial_option_value"
}

Exposed variables

Variable	Type	Description
value	String	The currently selected option's value