Single-select List

A radio box list is used to give a user a way to select one from a set of choices.

Default

Please select a wand type:
Please select a wand type:
<tk-single-select-list
  options='[{ "label": "Holly", "value": "holly" }, { "label": "Willow", "value": "willow" }, { "label": "Vine", "value": "vine" }, { "label": "Yew", "value": "yew" } ]'>
</tk-single-select-list>

Description

The single-select list renders a list of radio buttons based on a set of input options. The options is an array of objects with label and value keys.

Inline

Please select a wand type:
Please select a wand type:
<tk-single-select-list
  inline
  options='[{ "label": "Holly", "value": "holly" }, { "label": "Willow", "value": "willow" }, { "label": "Vine", "value": "vine" }, { "label": "Yew", "value": "yew" } ]'>
</tk-single-select-list>

Description

By default, the options are stacked. Set inline to make the options inline.

Size



<tk-single-select-list
  inline
  size="small"
  options='[{ "label": "Holly", "value": "holly" }, { "label": "Willow", "value": "willow" }, { "label": "Vine", "value": "vine" }, { "label": "Yew", "value": "yew" }]'>
</tk-single-select-list>

<hr>

<tk-single-select-list
  inline size="medium"
  options='[{ "label": "Holly", "value": "holly" }, { "label": "Willow", "value": "willow" }, { "label": "Vine", "value": "vine" }, { "label": "Yew", "value": "yew" }]'>
</tk-single-select-list>

<hr>

<tk-single-select-list
  inline
  size="large"
  options='[{ "label": "Holly", "value": "holly" }, { "label": "Willow", "value": "willow" }, { "label": "Vine", "value": "vine" }, { "label": "Yew", "value": "yew" }]'>
</tk-single-select-list>

Description

The default size is small. Medium and large options are available.

Props

Property Required? Default Description
inline no false Controls the orientation of the options. If set to true, the options will be displayed horizontally. Otherwise, they will be stacked.
options yes An array of choices to render. This must be an array of objects with label and value properties.
selected no A value that, if matches value in the options, will preselect that option.
size no "small" Controls the size of the options. "small", "medium", and "large" are the valid options

Events

Name Description
checked The value of the currently selected option.