x-toggle
An <x-toggle>
is a component merging <input type="radio">
and <input type="checkbox">
into a single tag to provide a single consistent UI and simplify markup.
Automatically switches between checkbox and radiobutton modes depending on name
attributes.
Basic usage
Markup
Automatic radio/checkbox modes using the name
attribute
<x-toggle>
automatically switch between radiobutton and checkbox modes by checking for other <x-toggle>
s with the same name
in the form.
Multiple <x-toggle>
s with the same name
in the same form context are automatically rendered as radio toggles, while <x-toggle>
s with unique name
attributes in a given form context are rendered as checkbox toggles.
Markup
Initializing the toggle with checked
Users can programmatically select an <x-toggle>
by providing it with the checked
attribute.
Markup
Hiding the checkbox with no-box
Users can hide the checkbox component of the <x-toggle>
from view by giving the <x-toggle>
the no-box
attribute.
User can also manipulate the .noBox
property of the <x-toggle>
for the same effect.
Markup
Grouping toggles with group
If several <x-toggle>
checkbox elements have the name group
attribute, then they can be multi-selected by clicking one end of a range of toggles, then shift clicking an end of the range.
To distinguish the currently selected toggle in a group, the selected toggle is also provided with the active
attribute.
Markup
CSS styling
[group="group-demo"][active]{
text-shadow: 1px 1px grey;
}
Styling <x-toggle>
s
To fully customize how the <x-toggle>
appear, utilize any of the following CSS selectors to customize specific parts of the toggle:
- To style the toggle as a whole, apply styles to
x-toggle
. - To set the text for a toggle's label, add a
label
attribute (text shown using:after
pseudo element) - To style the toggle's checkbox/radiobutton only, apply styles to
x-toggle > .x-toggle-check
. - To style checkbox-type toggles only, apply styles to
x-toggle[type='checkbox']
. - To style radio-type toggles only, apply styles to
x-toggle[type='radio']
. - To style selected toggles only, apply styles to
x-toggle[checked]
. - To style focused toggles only, apply styles to
x-toggle[focus]
. - To style active group toggles only, apply styles to
x-toggle[active]
. - To style only toggles without polyfill boxes, apply styles to
x-toggle[no-box]
.
Markup
CSS styling
.custom-style{
float: left;
clear: both;
margin-top: .5em;
}
.custom-style > .x-toggle-content{
background-color: rgba(255,255,255,.5);
padding: .5em;
border-radius: 4px;
}
.custom-style[focus] > .x-toggle-content
{
box-shadow: 1px 1px 4px grey;
}
.custom-style[checked] > .x-toggle-content{
background-color: rgba(255,165,0,.5);
}
.custom-style[type="radio"]{
font-family: Courier, monospace;
text-transform: uppercase;
}