Radio Input
Radio Input is used to allow users to select a single option from a set of mutually exclusive choices.
Last updated
Radio Input is used to allow users to select a single option from a set of mutually exclusive choices.
Last updated
Radio inputs are used when a user needs to select a single option from a list. They are ideal for scenarios where only one choice is allowed, such as in forms, surveys, and settings where users must choose one option among several.
Radio inputs are presented in groups, with each input representing a unique option. Users can select one input from the group, and choosing a new option will automatically deselect any previously selected option within that group. Each radio input includes a visible circle, a label, and may feature additional elements like subtitles or trailing icons for added context.
aria_label
The aria-label for the radio button input. This is used for accessibility purposes, allowing screen readers to describe the radio button when it does not have a visible label.
string
checked
Indicates whether the radio button is selected or not. This prop controls the checked state of the radio button.
boolean
component_mode
A mode for the radio button component, which can be used to define specific functionality or appearance based on different modes (e.g., "edit", "view", etc.).
string
custom_class
A custom CSS class that will be added to the radio button container. This allows for additional customization and styling beyond the default styles.
string
group_name
The name of the radio button group. This is used to group multiple radio buttons together, allowing only one selection within the group.
string
input_id
The ID for the input element (radio button). This prop is used to associate the <label> with the corresponding <input> element for accessibility and form functionality.
string
radio_status
The status of the radio button, such as "disabled" or other custom states. This prop can be used to apply different styles or behavior depending on the radio button's status.
string
size
The size of the radio button. Possible values can be 'sm', 'md', or 'lg', where 'sm' is small, 'md' is medium, and 'lg' is large. This prop adjusts the size of the radio button.
string
supporting
Additional supporting text that can be displayed alongside the title. This prop is optional and is used for any extra information or description related to the radio button option.
string
title_text
The main label text that will appear next to the radio button. This is a required prop that provides a title for the radio button option.
string
variants
The variant of the radio button. Similar to size, it can be used to define different visual appearances, such as different shapes, borders, or colors.
string
Radio Button Icon: Represents the selectable option within the radio button group. When selected, it indicates the chosen option.
Radio Button Label: The main title or descriptor of the radio button option, providing a summary of what the option represents.
Supporting Text: Additional text that provides context or information related to the radio button option, helping users understand its purpose.
Subtitle: A more detailed description or supplementary information associated with the radio button option.
Use radio inputs when the user needs to select only one option from a set.
Don't use radio inputs for multiple selections; use checkboxes for that purpose.
Label each radio input clearly to indicate the option it represents.
Avoid using ambiguous or unclear labels for radio inputs.
Group related radio inputs together visually and logically.
Don't scatter related radio inputs throughout different parts of the UI.
Ensure radio inputs are large enough to be easily tappable or clickable.
Avoid making radio inputs too small to interact with comfortably.
Use consistent spacing between radio inputs in the same group.
Don't place radio inputs too close together or too far apart, which can hinder usability.
Provide a clear visual indication of the selected state.
Don't leave users guessing which option is currently selected.
Include appropriate aria-labels for accessibility.
Don't neglect accessibility requirements such as focus states and keyboard navigation.
Ensure each radio input has sufficient contrast against its background.
Avoid using low contrast that can make the radio inputs difficult to see.
