What You'll Build

A comprehensive form demonstrating different selection field types: dropdowns, radio buttons, and checkbox lists. You'll learn when to use each type and how to create dynamic options.

What You'll Learn

How to create dropdown selects and radio button groups
When to use dropdowns vs radio buttons
Building checkbox lists for multiple selections
Creating dynamic options that change based on user input
Setting orientation and validation rules

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our selection fields step by step.

Step 2: Add Dropdown Select

First, let's add a dropdown for country selection. Dropdowns are perfect for long lists of options where users need to select one item.

💡 Tip:

Dropdowns are ideal when you have many options (5+ items) or when space is limited. They're also great for hierarchical data like countries, states, or categories.

Step 3: Add Radio Button Group

Now let's add radio buttons for experience level. Radio buttons are better for short lists where you want all options visible at once.

💡 Tip:

Radio buttons are perfect for 2-5 options that users should see immediately. The orientation property controls whether they're horizontal or vertical.

Step 4: Add Checkbox List

Now let's add a checkbox list for multiple selections. Users can select multiple areas of interest.

💡 Tip:

Checkbox lists allow multiple selections. Use min and max to control how many items users must/can select. Perfect for "select all that apply" scenarios.

Step 5: Dynamic Options

Finally, let's create dynamic options that change based on user selection. The country dropdown will show different options based on the selected region.

💡 Tip:

Use form.state() to store values and form.computedValue() to create reactive options. This creates powerful cascading dropdowns!

When to Use Each Selection Type

Dropdown: Long lists (5+ items), limited space, hierarchical data, or when you want to save screen space
Radio Buttons: Short lists (2-5 items), when you want all options visible, or for mutually exclusive choices
Checkbox List: Multiple selections allowed, "select all that apply" scenarios, or when users can choose 0 to many options

Try It Yourself

Challenge 1: Change the radio button orientation to 'vertical' and see the difference
Challenge 2: Add more countries to the dropdown options
Challenge 3: Modify the checkbox list to require at least 2 selections
Challenge 4: Add a third region option to the dynamic example

Next Steps

Excellent work! You've mastered selection fields and learned when to use each type. Ready to explore form layout techniques?

Continue to Multi-Column Layouts Tutorial

Other learning paths:

Learn about number inputs and validation
Master advanced form layout techniques
Add conditional logic to show/hide fields
Explore form validation and error handling