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:
<fieldset>
  <legend class="form__label form__label--stacked mb-3x">Please select a wand type:</legend>
  <tk-single-select-list options="defaultOptions">
  </tk-single-select-list>
</fieldset>

<!-- only required for use outside of a framework -->
<script>
  const component0 = document.getElementsByTagName('tk-single-select-list')[0];
  const defaultOptions = [
    { "label": "Holly", "value": "holly" },
    { "label": "Willow", "value": "willow" },
    { "label": "Vine", "value": "vine" },
    { "label": "Yew", "value": "yew" },
  ];
  component0.options = defaultOptions;
</script>

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.

Using within a framework:

Requires options Prop to be bound, so that it’s set as an object instead of a string. In Angular, this is: [options]='[{ your object }]'.

Using without a framework:

This requires JS to set the options Prop, otherwise it’ll treat the value as a string. Read More →

Label with hint

<tk-single-select-list
  heavy
  options="options1"
  selected="willow">
</tk-single-select-list>

<!-- only required for use outside of a framework -->
<script>
  const component1 = document.getElementsByTagName('tk-single-select-list')[1];
  const options1 = [
    {
      "hint": "Wands with holly are loyal to its owner. It's best for those on dangerous or spiritual quests.",
      "label": "Holly",
      "value": "holly"
    },
    {
      "hint": "Wands made of vine are attracted to witches and wizards who have mysterious personalities.",
      "label": "Vine",
      "value": "vine"
    },
    { "label": "Willow", "value": "willow" },
    { "label": "Yew", "value": "yew" },
  ];
  component1.options = options1;
</script>

Description

Sometimes a form option requires a bit more explanation. Adding a hint key with a string value will output a hint below the option. Use the heavy attribute to emphasis the label option. Note: this should never be used with inline.

Inline

<tk-single-select-list
  inline
  options="defaultOptions">
</tk-single-select-list>

<!-- only required for use outside of a framework -->
<script>
  const component2 = document.getElementsByTagName('tk-single-select-list')[2];
  component2.options = defaultOptions;
</script>

Description

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

Selected by default

<tk-single-select-list
  heavy
  options="defaultOptions"
  selected="willow">
</tk-single-select-list>

<!-- only required for use outside of a framework -->
<script>
  const component3 = document.getElementsByTagName('tk-single-select-list')[3];
  component3.options = defaultOptions;
</script>

Description

Use selected and an option’s value to set it to selected (:checked) by default.

Size



<tk-single-select-list
  inline
  size="small"
  options='defaultOptions'>
</tk-single-select-list>

<hr>

<tk-single-select-list
  inline
  size="medium"
  options='defaultOptions'>
</tk-single-select-list>

<hr>

<tk-single-select-list
  inline
  size="large"
  options='defaultOptions'>
</tk-single-select-list>

<!-- only required for use outside of a framework -->
<script>
  const componentSize = document.getElementsByTagName('tk-single-select-list');
  componentSize[4].options = defaultOptions;
  componentSize[5].options = defaultOptions;
  componentSize[6].options = defaultOptions;
</script>

Description

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

Props

Property Required? Default Description
heavy no false Sets the font weight (bold) on the label.
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. It can also have a hint property to display a hint within the label.
required no false Sets the HTML attribute of required. Should be set if required before user can proceed.
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.