Figma Radio Components

Radio Components are an important part of a website for making clear decision flows. Radio button are designed with labels and icons to indicate behaviors. Pagedone’s consistent, accessible components enable intuitive experiences and simplify system logic.


Figma Radio Components

Radio buttons give users the power to pick only one option from a list of choices. These interactive controls show up in many places like forms, settings menus, and preference panels. Radio buttons force the user to choose just a single item.

Figma Radio Components image

On the other hand, checkboxes provide flexibility by letting users select multiple items simultaneously from a group of options. The key difference is that radio buttons restrict selection to one item while checkboxes allow choosing several.

Figma Radio Components Properties

there are a total of 5 properties for the Radio component.

Figma Radio Components Properties image

The Radio component has five total properties that can be adjusted. The property names are Size, Text, Sub Text, Click, and State. These settings control different aspects of how the Radioes appear and function. Users can modify things like the overall dimensions, the main label text, any additional subtext, clickability, and the current visual state. Configuring these five properties allows for complete customization of the Radio elements.

Figma Radio Properties: Size

The Radio component in Figma offers two size options to choose from. The first size is small which makes the Radioes compact. The second size is medium which displays the Radioes at a larger default scale.

Figma Radio Properties Size image

These two sizes, small and medium, provide designers with choices for the overall dimensions of the Radio elements. Selecting the appropriate size allows for tailoring the Radioes to best fit the layout and needs of the specific interface design.

Figma Radio Properties: Text & Sub Text

The Radio component has properties for both primary text and secondary subtext. The text property controls the main label or title that describes the Radio. The sub text property allows adding additional explanatory text below the main label.

Figma Radio Properties Text & Sub Text image

Enabling or disabling these text properties determines if only the primary text appears or if a supplementary subtext line is also displayed. The text and sub text settings give flexibility in providing as much or as little descriptive messaging as needed for each Radio control.

Figma Radio Properties: Click

The Radio element offers a property to control the check mark symbol. This setting manages when the check mark appears inside the Radio. A toggle option determines whether the check mark should be visible or hidden.

Figma Radio Properties Click image

When the toggle is enabled, it displays a visible check mark to indicate the Radio is currently selected. Disabling the toggle hides the check mark symbol, signifying the Radio is currently unselected. This check mark property gives users precise control over whether the checked state is visually represented with a mark inside the box.

Figma Radio Properties: State

The Radio component has three different visual states it can display. The first is the default state, which shows the standard unchecked appearance. The second is the hover state, which is triggered when the user's mouse cursor moves over the Radio. The third state is the disabled state, which grays out the Radio to indicate it is currently unusable.

Figma Radio Properties State image

These three states - default, hover, and disabled - allow the Radio to provide clear visual feedback to users about its current condition and availability for interaction. Designers can customize the appearance in each state to best communicate the Radio's status.

Figma Radio Component image

Figma Radio Components

All components are available in tailwind css also, please check.

Check Now