Skip to content

tmpduarte/paper-radio-button

 
 

Repository files navigation

Build status

Demo and API docs

##<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.