ptcs-radio-group¶

Visual¶

No image yet

Overview¶

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¶

<ptcs-radio-group
  items='[{"name": "John", ...},{"name":"Nick", ...} ...]'
  selected="{{choice}}"
  selector="name"></ptcs-radio-group>

Component API¶

Properties¶

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?

Events¶

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

Styling¶

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

RTL¶

To be implemented

ARIA¶

To be specified