Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.

Radio buttons

Radio buttons are part of a group of two or more. They signal an action where users can only select one radio button.

radio buttons visual example
radio buttons visual example

Using radio buttons

Radio buttons must feature a descriptive label. They must be part of a group of radio buttons of at least two. A radio button may also have sub-components or child radio button groups.


radio buttons design properties

Radio buttons make the selection visually distinct.

Radio button label
Its labels should be as short as possible, with text that clearly states what selection is chosen once the corresponding form is submitted.

Radio button group label (optional)
If 2 or more radio buttons are grouped, it's recommended that the group also carries a clear label.

See WikimediaUI Figma radio buttons component.

States of radio buttons

The styles for its states were designed with accessible color variations additional to the 'disc' disc icon icon to distinguish the checkbox' following visually separated states in switched on and off mode (e.g. disabled, hover, active):

radio buttons visual design and states


See OOUI's demos section of radio buttons.