<div class="checkbox-item">
<div class="checkbox-item__inner">
<input class="checkbox-item__input" type="checkbox" id="tor-notify" name="torNotify" value="" />
<label class="checkbox-item__label" for="tor-notify">Notify me when someone makes a time-off request</label>
<div class="checkbox-item__icons">
<?xml version="1.0" encoding="utf-8"?>
<svg class='checkbox-item__icon checkbox-item__icon-yes' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">
<path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg class='checkbox-item__icon checkbox-item__icon-maybe' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">
<defs><path id="a" d="M0 0h24v24H0z"/></defs><clipPath id="b">use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg class='checkbox-item__icon checkbox-item__icon-no' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
</div>
</div>
<div class="checkbox-item">
<div class="checkbox-item__inner">
<input class="checkbox-item__input" type="checkbox" id="{{ id }}" name="{{ name}}" value="{{ value }}" {{#if checked}}checked{{/if}} {{#if maybe}}indeterminate{{/if}}/>
<label class="checkbox-item__label" for="{{id}}">{{label}}</label>
<div class="checkbox-item__icons">
{{> @icon icon=iconYes class="checkbox-item__icon checkbox-item__icon-yes"}}
{{> @icon icon=iconMaybe class="checkbox-item__icon checkbox-item__icon-maybe"}}
{{> @icon icon=iconNo class="checkbox-item__icon checkbox-item__icon-no"}}
</div>
</div>
{{#if postText}}
<p class="checkbox-item__post-text">{{ postText }}</p>
{{/if}}
</div>
{
"id": "tor-notify",
"name": "torNotify",
"label": "Notify me when someone makes a time-off request",
"iconYes": "<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/>",
"iconNo": "<path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
"iconMaybe": "<defs><path id=\"a\" d=\"M0 0h24v24H0z\"/></defs><clipPath id=\"b\">use xlink:href=\"#a\" overflow=\"visible\"/></clipPath><path clip-path=\"url(#b)\" d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\"/>"
}
function h(type, props, ...children) {
return { type, props, children };
}
function setProp($target, name, value) {
$target.setAttribute(name, value);
}
function setProps($target, props) {
Object.keys(props).forEach(name => {
setProp($target, name, props[name]);
});
}
function createElement(node) {
if (typeof node === 'string') {
return document.createTextNode(node);
}
const $el = document.createElement(node.type);
setProps($el, node.props);
node.children
.map(createElement)
.forEach($el.appendChild.bind($el));
return $el;
}
const svg = (
h('svg', {
class: 'checkbox-item__icon checkbox-item__icon-yes',
xmlns: 'http://www.w3.org/2000/svg',
width: '24',
height: '24',
viewBox: '0 0 24 24'
}, h('path', {
d: 'M0 0h24v24H0z',
fill: 'none'
}),
h('path', {
d: 'M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
})
)
)
const $root = document.getElementById('root');
if ($root) {
$root.appendChild(createElement(svg));
}
console.log({ svg })
function h(type, props, ...children) {
return { type, props, children };
}
function setProp($target, name, value) {
$target.setAttribute(name, value);
}
function setProps($target, props) {
Object.keys(props).forEach(name => {
setProp($target, name, props[name]);
});
}
function createElement(node) {
if (typeof node === 'string') {
return document.createTextNode(node);
}
const $el = document.createElement(node.type);
setProps($el, node.props);
node.children
.map(createElement)
.forEach($el.appendChild.bind($el));
return $el;
}
const svg = (
h('svg', {
class: 'checkbox-item__icon checkbox-item__icon-yes',
xmlns: 'http://www.w3.org/2000/svg',
width: '24',
height: '24',
viewBox: '0 0 24 24'
}, h('path', {
d: 'M0 0h24v24H0z',
fill: 'none'
}),
h('path', {
d: 'M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
})
)
)
const $root = document.getElementById('root');
if ($root) {
$root.appendChild(createElement(svg));
}
console.log({ svg })
Checkboxes represent multiple options of which one, many, or none may be selected. Checkboxes may also be used to indicated nested selections, such as categories and their respective services.
Use Checkboxes when a user may select one, many, or none of the options in a relatively small set.