In this tutorial, we’ll look into how to add Choice Form Elements, such as Dropdown, Radio Buttons and Checkboxes to your Figma form.
Dropdown
Dropdowns offer a compact way to display a list of options. Users can select a single choice from the dropdown menu, which helps to avoid cluttering the form layout.
Steps
Select the dropdown form element from the component library in the plugin, which will be added to the component library frame. Copy the dropdown component from there and paste it to your form, or drag it from Figma's assets panel.
Configure the options for the dropdown menu. (Tapping on the form element pasted in the form lets you configure this element.) Simply add an option per line in the Options field.
Radio Buttons
Radio buttons are ideal for single-choice selections, allowing users to pick one option from a list.
Steps
Select the radio buttons form element from the component library in the plugin, which will be added to the component library frame. Copy the radio buttons component from there and paste it to your form, or drag it from Figma's assets panel.
As you can see, you get a component with 3 options by default. Of course, you can add more. To add more options to your radio buttons, right click on the radio buttons instance in the Layers section and select “detach instance”. Go back to your form, copy and paste as many options as you need. This way, you make sure that your options are part of the functioning form.
Checkboxes
Checkbox buttons facilitate multiple selections, allowing users to choose one or more options from a list.
Steps
Select the checkboxes form element from the component library in the plugin, which will be added to the component library frame. Copy the checkbox buttons component from there and paste it to your form, or drag it from Figma's assets panel.
As you can see, you get a component with 3 options by default. Of course, you can add more. To add more options to your checkbox buttons, right click on the checkbox buttons instance in the Layers section and select “detach instance”. Go back to your form, copy and paste as many options as you need. This way, you make sure that your options are part of the functioning form.
Styling Your Form Elements & Publishing the Form
Since we’re in Figma, there is no limit to how you can style the design of your form. Change colours, fonts, shapes, content, placements, etc. When you’re done with editing, hit the publish button.
There are two ways you can edit your form elements:
By editing the instances of your form elements directly in your form's frames.
By editing the main components in the component library.
The latter means that any changes you make to the component element will automatically apply to all its instances. But if you make changes to an instance (i.e. your form itself), it won’t affect the main component.
However, if you want to change the design of various checkbox or radio button states (i.e. on hover, on select, default) you can only do so in the variants available in the component library.
That’s how the forms look and work when published.
