Skip to content



No image yet


A radio-group control allows the user to select a single choice from a list of choices.

Usage Examples

Basic Usage

<ptcs-radio-group items="[[options]]" selected="{{choice}}"></ptcs-radio-group>

Note: - items is an array of strings. It can be managed with Polymer data binding or manually. - _selected is the index of the selected choice. It can be tracked with Polymer data binding or by listening to the "selected-changed" event

Specify a label

<ptcs-radio-group label="SORT BY" items="[[options]]" selected="{{choice}}"></ptcs-radio-group>

Specify a selector

  items='[{"name": "John", ...},{"name":"Nick", ...} ...]'

Component API


Property Type Description
label String The optional label before the current choice
items Array Array of available choices. (See selector)
selected Number Current choice, index into items
selector Selects the string from each item in items. If unassigned, items should be an array of strings. If a string then items should be an array of objects, where selector specifies the (string) property to display. If a function, then the function is called with each item and should return a corresponding string
disabled Boolean Is the radio-group disabled?


Name Event.detail Description
selected-changed { value: selected } Generated when selected changes


The Parts of a Component

Part Description
label The label
root The container of the radio buttons
radio A radio button

CSS Variables

No CSS variable suppot yet


To be implemented


To be specified