RadioSelect
Molecule
Usage
The Radio Select component is typically used for scenarios where a user must make a single choice from a group of mutually exclusive options. When a user selects a radio button, all other radio buttons within the same group become deselected.
It is suggested to use Radio select for 5 or fewer options to the users. If you are presenting more than 5 options, nest Radio select components inside a Select component’s dropdown menu instead.
Differences among Switch, Checkbox and Radio Select: Tapping a Switch is a two-step action: selection and execution, whereas a Checkbox is just selection of an option and the execution action is usually required later on or is in a separate location, such as after clicking Save. Radio Select conveys that a set of items are options and only one can be chosen among them, and they shouldn’t be used to toggle items on or off. Radio Select should be used instead of Checkboxes if only one item can be selected from a list.
Playground
<
RadioSelect
options
=
"[
{
"text": "Option 1",
"value": 1,
"tooltip": "my custom tooltip"
},
{
"text": "Option 2",
"value": 2,
"tooltip": ""
},
{
"text": "Option 3",
"value": 3,
"tooltip": ""
},
{
"text": "Option 4",
"value": 4,
"tooltip": ""
}
]"
labelCategory
=
"large"
clickableLabel
modelValue
=
"1"
alignment
=
"vertical"
colorVariant
=
"lila"
/>
Anatomy
Unselected state border - The visible boundary of the radio button. Its purpose is to Define the shape and show active or hover states. Selected indicator -The filled circle that appears when the radio is selected.Its purpose is to visually indicate the selected state. Form Label - The descriptive text next to the radio button. Its purpose is to explain what the option represents. Container - Clickable area.
States
Default, Hover, Active, Focus, Locked
Variants
Selection
Radio Select can be selected or unselected.
Color
Radio Select can be in two colors: Lila and Grape.
Sizes
Radio Select can be constructed with the Default size Form Label and Large size Form Label, therefore there are 2 types.
Form Label
Show or hide Form Label.
Properties
ts
export type RadioSelectOption<T extends string | number> = TooltipProps & {
text?: string,
value: T;
isDisabled?: boolean;
};
export type RadioSelectColorVariant = 'lila' | 'grape';
export interface RadioSelectProps<T extends string | number> {
modelValue: T;
options: RadioSelectOption<T>[];
disabled?: boolean;
alignment?: 'horizontal' | 'vertical';
labelCategory?: FormLabelCategory;
clickableLabel?: boolean;
colorVariant?: RadioSelectColorVariant;
}