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.