RadioSelect

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.

Types

Radio Select can be constructed with the Standard size Form Label and Compact size Form Label, therefore there are 2 types.

Anatomy and Behavior

1. Outer circle - is a circle that visually represents the component and is the clickable area of the component.
2. Inner circle - When Radio Select is selected, an inner circle appears.
3. Label - By default Form Label (compact) component is used, but optionally it can also use the Form Label standard size component in cases where we require a larger label text. Label is the description of which option is being activated by this particular Radio Select component. Labels can be as short as a word or a phrase or as long as a paragraph. No need to include “Selected” and “Unselected” texts as Label since the status of Radio select clearly depicts that. The label can optionally be made non-clickable.
4. Container - The container within which the outer circle and label lie. It is the default clickable area.

Behavior

• Radio select components can only exist in sets. The selection is mutually exclusive, which means when user selects one the other one gets deselected. The only way to deselect a selected Radio component is to select the any other one.
• When hovered over the whole component including the Form Label, the cursor changes to pointer just like in all other hover states of components, however only the Radio Select part changes visually to communicate :hover and :active states.

States

Both Selected and Unselected statuses of Radio select can have hover, active, focus, and Disabled states.

Gaps and Sizes

• Outer circle diameter: Mplus
• Inner circle diameter: XS
• Padding: 2XS

Option 1

Option 1

Option 1

Option 1

Option 1

Option 1

Tokens

SCSS Variable

Value

$radioSelect-selected-outerCircle-bgColor

--bds-brand-primary-color

$radioSelect-selected-innerCircle-bgColor

--color-grey-98

$radioSelect-selected-outerCircle-bgColor--locked

--bds-brand-bgColor--locked

$radioSelect-unselected-outerCircle-bgColor

--color-grey-90

$radioSelect-unselected-outerCircle-bgColor--locked

--color-grey-86

$radioSelect-outline-color--focus

--color-azure-45

$radioSelect-selected-outerCircle-boxShadow

none

$radioSelect-selected-innerCircle-boxShadow

--elevation-1

$radioSelect-outerCircle-boxShadow--locked

none

$radioSelect-innerCircle-boxShadow--locked

none

$radioSelect-outerCircle-boxShadow--hover

--embossed-1--grey-98

$radioSelect-innerCircle-boxShadow--hover

--elevation-2

$radioSelect-outerCircle-boxShadow--active

--bds-emphasis-boxShadow--active

$radioSelect-innerCircle-boxShadow--active

--elevation-1

$radioSelect-unselected-outerCircle-boxShadow

--die-cut-05

$radioSelect-unselected-outerCircle-boxShadow--hover

--die-cut-1

Properties

export interface RadioSelectOption<T extends string | number> extends TooltipProps {
  text: string,
  value: T;
  isDisabled?: boolean;
}

export interface RadioSelectProps<T extends string | number> extends ExcludeType {
  modelValue: T;
  options: RadioSelectOption<T>[];
  disabled?: boolean;
  alignment?: 'horizontal' | 'vertical';
}

export type ExcludeType =
  Omit<
    Omit<FormLabelOptionalProps, keyof TooltipProps>,
    'labelPosition'
  >

Configurations

Radio Select
Size	Normal	Disabled
	small	Option 1 Option 2 Option 3	Option 1 Option 2 Option 3
medium	Option 1 Option 2 Option 3	Option 1 Option 2 Option 3
big	Option 1 Option 2 Option 3	Option 1 Option 2 Option 3