A radio box list is used to give a user a way to select one from a set of choices.
<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>
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.
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 }]'
.
This requires JS to set the options
Prop, otherwise it’ll treat the value as a string. Read More →
<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>
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
.
<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>
By default, the options are stacked. Set inline
to make the options inline.
<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>
Use selected
and an option’s value to set it to selected (:checked
) by default.
<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>
The default size is small. Medium and large options are available.
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 |
Name | Description |
---|---|
checked |
The value of the currently selected option. |