Layout
Label placement
You have the option to place the label after or below the radio. Default is label after.
Visual layout options
Groups
You can use radio groups horizontally or vertically, depending on the space you’re working with.
Color / States
Rest
The default or normal appearance when it's not being interacted with.
|
|
Design token |
Value |
|---|---|---|
|
(1) Not checked container |
CompoundBrandStroke.Rest |
#295CAD |
|
(2) Checked container |
Fill: CompoundBrandForeground.Rest Stroke: CompoundBrandStroke.Rest |
#295CAD |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
Hover
The hover state refers to the visual and interactive changes that occurs when a user moves their cursor over the button but doesn't click it. The interaction is very temporary and in our case, includes a color change to provide feedback to the user.
|
|
Design token |
Value |
|---|---|---|
|
(1) Not checked container |
CompoundBrandStroke.Hover |
#19458B |
|
(2) Checked container |
Fill: CompoundBrandForeground.Hover Stroke: CompoundBrandStroke.Hover |
#19458B |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
Pressed
The pressed state refers to the visual and interactive changes that occur when a user clicks or taps on it.
|
|
Design token |
Value |
|---|---|---|
|
(1) Not checked container |
CompoundBrandStroke.Pressed |
#0C3069 |
|
(2) Checked container |
Fill: CompoundBrandForeground.Pressed Stroke: CompoundBrandStroke.Pressed |
#0C3069 |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
Disabled
When the component is temporarily inactive or unresponsive to user interaction. In this state, the container and label appears grayed out to visually indicate that it cannot be clicked or triggered.
|
|
Design token |
Value |
|---|---|---|
|
(1) Not checked container |
Neutral/Foreground/Disabled/Rest |
#AFB6B6 |
|
(2) Checked container |
Neutral/Foreground/Disabled/Rest |
#AFB6B6 |
|
(3) Label |
Neutral/Foreground/Disabled/Rest |
#AFB6B6 |
Focus
The focus state occurs when it is highlighted, indicating that it is currently selected or in focus. This state is often triggered when a user tabs through interactive elements on a webpage or app, providing a visual cue that it's ready to be activated or clicked. It helps users navigate and interact with the interface, especially for those who rely on keyboard navigation or assistive technologies.
|
|
Design token |
Value |
|---|---|---|
|
(1) Not checked container |
CompoundBrandStroke.Rest |
#295CAD |
|
(2) Checked container |
Fill: CompoundBrandForeground.Rest Stroke: CompoundBrandStroke.Rest |
#295CAD |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
|
(4) Focus ring |
StrokeFocus1.Rest |
#295CAD |
|
(4) Focus ring outer stroke |
StrokeFocus2.Rest |
#FFFFFF |
Specs
|
|
Design token |
Value |
|---|---|---|
|
(1) Container width / height |
N/A |
32px ×32px |
|
(2) Label |
body1 |
14px / 11pt, Regular |
|
(3) Focus ring |
borderRadiusSmall |
2px |
|
(4) Label after height |
N/A |
34px |
|
(5) Label below height |
N/A |
66px |
Spacing
|
|
Design token |
Value |
|---|---|---|
|
Label after: padding between container and label |
spacingHorizontalXS |
4px |
|
Label after: padding after label |
spacingHorizontalS |
8px |
|
Label below: padding between container and label |
spacingVerticalXS |
4px |
|
Label below: padding below label |
spacingVerticalS |
8px |
|
Label below: padding left/right |
spacingHorizontalSNudge |
6px |
Grouping
Follow the below spacing specs when using checkboxes in horizontal or stacked groups:
|
|
Alignment |
Alias design token |
Value |
|---|---|---|---|
|
Padding between label and checkbox options |
Horizontal |
spacingHorizontalXS |
4px |
|
Padding between checkbox options |
Horizontal |
spacingVerticalXXS |
2px |
|
Padding between label and checkbox options |
Stacked |
spacingVerticalXS |
4px |
|
Padding between checkbox options |
Stacked |
spacingVerticalNone |
0px |