<paper-radio-button>

Material design: Radio button

paper-radio-button is a button that can be either checked or unchecked. User can tap the radio button to check or uncheck it.

Use a <paper-radio-group> to group a set of radio buttons. When radio buttons are inside a radio group, exactly one radio button in the group can be checked at any time.

Example:

<paper-radio-button></paper-radio-button>
<paper-radio-button>Item label</paper-radio-button>

Styling

The following custom properties and mixins are available for styling:

Custom property	Description	Default
--paper-radio-button-unchecked-background-color	Radio button background color when the input is not checked	transparent
--paper-radio-button-unchecked-color	Radio button color when the input is not checked	--primary-text-color
--paper-radio-button-unchecked-ink-color	Selected/focus ripple color when the input is not checked	--primary-text-color
--paper-radio-button-checked-color	Radio button color when the input is checked	--primary-color
--paper-radio-button-checked-ink-color	Selected/focus ripple color when the input is checked	--primary-color
--paper-radio-button-size	Size of the radio button	16px
--paper-radio-button-label-color	Label color	--primary-text-color
--paper-radio-button-label-spacing	Spacing between the label and the button	10px

This element applies the mixin --paper-font-common-base but does not import paper-styles/typography.html. In order to apply the Roboto font to this element, make sure you've imported paper-styles/typography.html.