Radio Button

Approved — Ready for dev

The radio button is a single-select UI control. A radio button may be either Large or Small. Radio buttons should only ever be used when the user needs to select one of a number of options. Never use a radio button when only one selection is available.

Anatomy

Radio buttons are made of the radio input with a label or slot option.

Label

The checkbox input with the label next to it is the default.

Radio input
Label - Body 1 or Caption

Slot

The radio input with a slot next to it lets the input be attached to anything. This may be a paragraph or image. This is determined by the design.

Radio input
Slot (optional)

Size

Radio buttons may either be Large or Small depending on the use case. The Large variant utilizes our Body 1 type style, so it is preferable in most use cases. The Small version may be used when the Caption type style and smaller imprint is preferable.

Radio input
Label - Body 1

Radio input
Label - Caption

Specs

Color

Element	Property	Value
Label	Text color	∆colorPlatformGray900
Radio input (static/off)	Background color	∆colorPlatformWhite
Radio input (static/off)	Border color	∆colorPlatformGray600
Radio input (selected/on)	Background color	∆colorPlatformWhite
Radio input (selected/on)	Border color	∆colorBrandedAffordanceAccessible
Radio input, label, and slot (disabled)	Alpha	∆colorPlatformAlpha400

Elevation

No elevation considerations needed for this component.

Spacing

Wrapping

States

Theming

No additional theming considerations are needed for this component.

Placement

Radio buttons should always be placed in a radio button group, directly beneath the heading or content that describes the context and implications of the selection. Radio button groups should typically be placed 24px below meta content, left-aligned to the edge of the parent container. Radio button groups should always contain two or more options—never use a radio button when only one selection is available.

Behavior

Selection

When a user selects an item in a radio button group, the selection state should animate quickly, offering feedback to the user’s action.

Interaction	Steps	Duration	Easing	Notes	Haptics
Selection	Selection border grows into frame	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Input border scales per design.	Light on trigger (Flutter: light)

Deselection

When a user selects an item in a radio button group while one is already selected, the previously selected radio button should animate away quickly, creating a sense of continuity between the change of selection.

Interaction	Steps	Duration	Easing	Notes	Haptics
Deselection	Selection border shrinks out of view	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Input border scales per design.

Developer Docs

Vue Developer Docs

Component documentation coming soon!