label

Radio button should always have a label for accessibility and clear comprehension. When the label is not defined, a radio button becomes standalone. Standalone radio buttons should only be used when their connection to other components is clear and they give sufficient context — for example, in application panels.

If a visible label isn't specified, an aria-label must be provided to the radio button for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

isEmphasized

By default, radio buttons are not emphasized. This version is optimal for when the radio button is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content.

The emphasized version provides a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a radio button needs to be noticed.

isSelected

Radio button can either be selected or not selected. They cannot be in an indeterminate state (unlike checkboxes).

size

Radio buttons come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.