Radio
Radio buttons allow users to select exactly one choice from a group
Size
Small: Compact and space-efficient, suitable for dense interfaces.
Medium: Balanced size that works well in most interfaces.
State
Default: The initial state before any user interaction.
Hover: A subtle border colour change on hover.
Focused: When the radio button is focused, either by keyboard navigation or mouse clicked.
Disabled: The radio button is not available for interaction.
Checked
False: The initial state before any user interaction.
True: When the radio button is chosen by the user.
Radio group
Label Size
Each size is designed to cater to different form needs, ensuring optimal readability and user experience.
Hint text
Hint text provides additional information or context for the radio button option, helping users make more informed choices.
State
Each radio states providing visual cues to the user about its current status and interaction possibilities.
- Checked: The initial state of the textfield when it is ready for user input but not currently interacted with.
- Default: The initial state of the radio when it is ready for interaction.
- Disabled: The radio is not available for user interaction due to either unavailability or user permissions.