- Figma
-
/ Figma Radio Components
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.
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.
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.
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.
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.
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.
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.
