A radio box list is used to give a user a way to select one from a set of choices.
<tk-single-select-list fieldset options="defaultOptions">
<div slot="legend" class="mb-2x">Please select a wand type:</div>
</tk-single-select-list>
<!-- 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", "disabled": true },
];
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 options="defaultOptions" fieldset>
<div slot="legend" fieldset class="mb-2x">What particular wand wood suits yew best?</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const componentsFieldset = document.getElementsByTagName('tk-single-select-list');
componentsFieldset[1].options = defaultOptions;
</script>When the fieldset prop is true, the select list items are wrapped in a fieldset. If content is also passed into the legend slot, the component renders a legend containing it.
<tk-single-select-list
fieldset
heavy
options="options1"
selected="willow">
<div slot="legend" fieldset class="mb-2x">What particular wand wood suits yew best?</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const component3 = document.getElementsByTagName('tk-single-select-list')[2];
const options3 = [
{
"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" },
];
component3.options = options3;
</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
fieldset
inline
options="defaultOptions"
>
<div slot="legend" fieldset class="mb-2x">What particular wand wood suits yew best?</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const component4 = document.getElementsByTagName('tk-single-select-list')[3];
component4.options = defaultOptions;
</script>By default, the options are stacked. Set inline to make the options inline.
<tk-single-select-list
fieldset
heavy
options="defaultOptions"
selected="willow">
<div slot="legend" fieldset class="mb-2x">What particular wand wood suits yew best?</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const component5 = document.getElementsByTagName('tk-single-select-list')[4];
component5.options = defaultOptions;
</script>Use selected and an option’s value to set it to selected (:checked) by default.
<tk-single-select-list
fieldset
inline
size="small"
options='defaultOptions'>
<div slot="legend" class="mb-2x">Small size:</div>
</tk-single-select-list>
<hr>
<tk-single-select-list
fieldset
inline
size="medium"
options='defaultOptions'>
<div slot="legend" class="mb-2x">Medium size:</div>
</tk-single-select-list>
<hr>
<tk-single-select-list
fieldset
inline
size="large"
options='defaultOptions'>
<div slot="legend" class="mb-2x">Large size:</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const componentSize = document.getElementsByTagName('tk-single-select-list');
componentSize[5].options = defaultOptions;
componentSize[6].options = defaultOptions;
componentSize[7].options = defaultOptions;
</script>The default size is small. Medium and large options are available.
<tk-single-select-list
block
fieldset
options="defaultOptions"
selected="yew"
size="medium">
<div slot="legend" fieldset class="mb-2x">Which particular wand wood suits yew best?</div>
</tk-single-select-list>
<hr>
<tk-single-select-list
block
fieldset
inline
options="defaultOptions"
selected="willow"
size="medium">
<div slot="legend" fieldset class="mb-2x">Which particular wand wood suits yew best?</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const componentsBlock = document.getElementsByTagName('tk-single-select-list');
componentsBlock[8].options = defaultOptions;
componentsBlock[9].options = defaultOptions;
</script>Adds block styling to the rendered radio button labels. The block variant labels do not wrap the inputs and are accessibly linked by IDs constructed using the option’s value, so option values must be unique. The block variant doesn’t render hints attached to individual options.
<tk-single-select-list
fieldset
options="componentsHtmlTagOptions"
selected="yew"
size="medium">
<div slot="legend" fieldset class="mb-2x">Which particular wand wood suits yew best?</div>
</tk-single-select-list>
<hr>
<tk-single-select-list
fieldset
inline
options="componentsHtmlTagOptions"
selected="willow"
size="medium">
<div slot="legend" fieldset class="mb-2x">Which particular wand wood suits yew best?</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const componentsHtmlTagOptions = [
{ "label": "<strong>Holly</strong>", "value": "holly" },
{ "label": "<em>Vine</em>", "value": "vine" },
{ "label": "<div>Yew</div>", "value": "yew" }
];
const componentsHtmlTags = document.querySelectorAll('tk-single-select-list[options="componentsHtmlTagOptions"]');
componentsHtmlTags[0].options = componentsHtmlTagOptions;
componentsHtmlTags[1].options = componentsHtmlTagOptions;
</script>Sometimes it’s necessary to render HTML tags within option labels. Labels will accept and render HTML tags of types em and strong. Note: other tags will be removed and so will be the style attribute.
<tk-single-select-list
block
fieldset
options="defaultOptions"
size="medium">
<div slot="legend" fieldset class="mb-2x">Which particular wand wood suits yew best?</div>
<div slot="error" class="l-inline-flex l-v-baseline t-base">
<tk-icon aria-label="error" class="mr-2x mv-auto" name="alert" role="img" size="medium"></tk-icon>Example error message
</div>
</tk-single-select-list>
<hr>
<tk-single-select-list
fieldset
options="defaultOptions"
size="medium">
<div slot="legend" fieldset class="mb-2x">Which particular wand wood suits yew best?</div>
<div slot="error" class="l-inline-flex l-v-baseline t-base">
<tk-icon aria-label="error" class="mr-2x mv-auto" name="alert" role="img" size="medium"></tk-icon>Example error message
</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const componentsError = document.getElementsByTagName('tk-single-select-list');
componentsError[12].options = defaultOptions;
componentsError[13].options = defaultOptions;
</script>Rich content passed into the error slot is rendered inside a tk-hint with error status
<tk-single-select-list
block
fieldset
inline
options="iconOptions"
size="medium">
<div slot="legend" fieldset class="mb-2x">How many icons would you like?</div>
</tk-single-select-list>
<hr>
<tk-single-select-list
fieldset
inline
options="iconOptions">
<div slot="legend" fieldset class="mb-2x">How many icons would you like?</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const iconOptions = [
{ "label": "One", "value": "1", "icon": "send" },
{ "label": "Two", "value": "2", "icon": "thumbs-up" },
];
const iconOptions2 = [
{ "label": "One", "value": "1", "icon": "atom", iconSize: "large" },
{ "label": "Two", "value": "2", "icon": "bar-chart", iconSize: "large" },
];
const componentsIcon = document.querySelectorAll('tk-single-select-list[options="iconOptions"]');
componentsIcon[0].options = iconOptions;
componentsIcon[1].options = iconOptions2;
</script>Adds icons to the end of the single select list label with additional property for icon size.
<tk-single-select-list
fieldset
options="hintOptions"
>
<div slot="legend" fieldset class="mb-2x">Choose an innerHTML hint</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const hintOptions = [
{ "label": "One", "value": "1", "renderedHTMLHint": "<li>List Format!</li><li><b>Neat!</b> 📸</li>" }
];
const componentsRenderedHint = document.querySelectorAll('tk-single-select-list[options="hintOptions"]');
componentsRenderedHint[0].options = hintOptions;
</script>Adds a rendered HTML hint based off given HTML. Overrides existing hint if added. Useful for displaying lists or other formatted options.
<tk-single-select-list fieldset options="defaultOptions" otherOption="otherOption" selected="other">
<div slot="legend" class="mb-2x">Please select a wand type:</div>
</tk-single-select-list>
<hr/>
<tk-single-select-list fieldset options="defaultOptions" block otherOption="otherOption" selected="other">
<div slot="legend" class="mb-2x">Please select a wand type:</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const otherComponents = document.querySelectorAll('tk-single-select-list[otheroption="otherOption"]');
const otherOption = {
"label": "Other",
"value": "other",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"preventPaste": "true"
}
otherComponents[0].options = defaultOptions;
otherComponents[0].otherOption = otherOption;
otherComponents[1].options = defaultOptions;
otherComponents[1].otherOption = otherOption;
</script>otherOption is an optional prop that will render an other option in the last position. otherOpiton will accept the same attributes as an option in addition to text, placeholder, textareaLabel.
<tk-single-select-list fieldset options="defaultOptions" none-of-the-above="noneOfTheAbove" selected="na">
<div slot="legend" class="mb-2x">Please select a wand type:</div>
</tk-single-select-list>
<hr/>
<tk-single-select-list fieldset options="defaultOptions" block none-of-the-above="noneOfTheAbove" selected="na">
<div slot="legend" class="mb-2x">Please select a wand type:</div>
</tk-single-select-list>
<!-- only required for use outside of a framework -->
<script>
const noneOfTheAboveComponents = document.querySelectorAll('tk-single-select-list[none-of-the-above="noneOfTheAbove"]');
const naOtherOption = {
"label": "Other",
"value": "other",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"preventPaste": "true"
}
const noneOfTheAboveOption = {
"label": "None of the above",
"value": "na",
}
noneOfTheAboveComponents[0].options = defaultOptions;
noneOfTheAboveComponents[0].noneOfTheAbove = true;
noneOfTheAboveComponents[0].noneOfTheAboveLabel = noneOfTheAboveOption.label;
noneOfTheAboveComponents[0].noneOfTheAboveValue = noneOfTheAboveOption.value;
noneOfTheAboveComponents[1].options = defaultOptions;
noneOfTheAboveComponents[1].otherOption = naOtherOption;
noneOfTheAboveComponents[1].noneOfTheAbove = true;
noneOfTheAboveComponents[1].noneOfTheAboveLabel = noneOfTheAboveOption.label;
noneOfTheAboveComponents[1].noneOfTheAboveValue = noneOfTheAboveOption.value;
</script>The none-of-the-above prop is a boolean attribute that can be added to the component to include a “None of the above” option in the list of radios.