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.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
block |
block |
Controls whether the options are rendered in block format | boolean |
false |
disabled |
disabled |
Displays the single-select in a disabled style. | boolean |
false |
fieldset |
fieldset |
Controls whether the options are rendered with a wrapping fieldset | boolean |
false |
heavy |
heavy |
Sets the font weight (bold) on the label. | boolean |
false |
inline |
inline |
Controls the orientation of the options. If set to true, the options will be displayed horizontally. Otherwise, they will be stacked. | boolean |
false |
options |
– | 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. This hint can also be rendered with InnerHTML via the renderedHTMLHint property. An additional icon and adjustable iconSize can be added to the option to append an icon and corresponding size. A ariaLabel can be added and will be the aria-label value of the label. | Option[] |
undefined |
otherOption |
– | An other option object to render. A text can be added to the option and will be the textarea value. A placeholder can be added to the option and will be the textarea placeholder. It can also have a hint property to display a hint within the label. This hint can also be rendered with InnerHTML via the renderedHTMLHint property. An additional icon and adjustable iconSize can be added to the option to append an icon and corresponding size. A textareaLabel can be added and will be the label value of the textarea. | basicOption & { hint?: string; icon?: string; iconSize?: SizeSML; renderedHTMLHint?: string; ariaLabel?: string; } & { text: string; placeholder?: string; textareaLabel?: string; preventPaste?: boolean; } |
null |
required |
required |
Sets the HTML attribute of required. Should be set if required before user can proceed. | boolean |
false |
selected |
selected |
A value that, if matches value in the options, will preselect that option. | string |
null |
size |
size |
Controls the size of the text and radio button. | "large" | "medium" | "small" |
'small' |
| Event | Description | Type |
|---|---|---|
checked |
The value of the currently selected option. | CustomEvent<string> |
updated |
The value of the changed state. | CustomEvent<{ value: string; other?: string; }> |