Checkbox JS

Checkbox can be applied to a checkbox or radio, it renders a new object that is stylable, and syncs updates to either the original html object or the rendered one.

Option Type Description
input Object || Element What to use for the input. If element, then checkbox/radio/toggle is appended next to it. If Object, then input is created using attributes to create element. OPTIONAL
class, name, id, value String Accepts any html attribute that is then rendered on checkbox/radio/toggle. OPTIONAL

uniformCheckbox



import {Checkbox} from 'uniform';
const checkbox = new Checkbox().render()
document.append(checkbox.el)

uniformToggle



import {Toggle} from 'uniform';
const toggle = new Toggle().render()
document.append(toggle.el)

uniformRadio



import {Radio} from 'uniform';
const radio = new Radio().render()
document.append(radio.el)

Color

.text-gray 
{ --text-opacity: 1.0;
 color: rgba(80, 81, 82, var(--text-opacity)) }
.text-gray-10 
{ --text-opacity: 1.0;
 color: rgba(229, 229, 229, var(--text-opacity)) }
.text-gray-20 
{ --text-opacity: 1.0;
 color: rgba(203, 204, 204, var(--text-opacity)) }
.text-gray-30 
{ --text-opacity: 1.0;
 color: rgba(177, 178, 179, var(--text-opacity)) }
.text-gray-40 
{ --text-opacity: 1.0;
 color: rgba(151, 153, 154, var(--text-opacity)) }
.text-gray-50 
{ --text-opacity: 1.0;
 color: rgba(125, 127, 129, var(--text-opacity)) }
.text-gray-60 
{ --text-opacity: 1.0;
 color: rgba(100, 101, 103, var(--text-opacity)) }
.text-gray-70 
{ --text-opacity: 1.0;
 color: rgba(75, 76, 77, var(--text-opacity)) }
.text-gray-80 
{ --text-opacity: 1.0;
 color: rgba(50, 50, 51, var(--text-opacity)) }
.text-gray-90 
{ --text-opacity: 1.0;
 color: rgba(25, 25, 25, var(--text-opacity)) }
.text-green 
{ --text-opacity: 1.0;
 color: rgba(151, 200, 72, var(--text-opacity)) }
.text-green-10 
{ --text-opacity: 1.0;
 color: rgba(235, 254, 204, var(--text-opacity)) }
.text-green-20 
{ --text-opacity: 1.0;
 color: rgba(214, 249, 158, var(--text-opacity)) }
.text-green-30 
{ --text-opacity: 1.0;
 color: rgba(192, 237, 119, var(--text-opacity)) }
.text-green-40 
{ --text-opacity: 1.0;
 color: rgba(168, 219, 86, var(--text-opacity)) }
.text-green-50 
{ --text-opacity: 1.0;
 color: rgba(143, 196, 58, var(--text-opacity)) }
.text-green-60 
{ --text-opacity: 1.0;
 color: rgba(117, 168, 35, var(--text-opacity)) }
.text-green-70 
{ --text-opacity: 1.0;
 color: rgba(90, 135, 17, var(--text-opacity)) }
.text-green-80 
{ --text-opacity: 1.0;
 color: rgba(61, 96, 5, var(--text-opacity)) }
.text-green-90 
{ --text-opacity: 1.0;
 color: rgba(31, 51, 0, var(--text-opacity)) }
.text-red 
{ --text-opacity: 1.0;
 color: rgba(225, 86, 62, var(--text-opacity)) }
.text-red-10 
{ --text-opacity: 1.0;
 color: rgba(254, 211, 204, var(--text-opacity)) }
.text-red-20 
{ --text-opacity: 1.0;
 color: rgba(251, 170, 156, var(--text-opacity)) }
.text-red-30 
{ --text-opacity: 1.0;
 color: rgba(244, 131, 112, var(--text-opacity)) }
.text-red-40 
{ --text-opacity: 1.0;
 color: rgba(234, 95, 71, var(--text-opacity)) }
.text-red-50 
{ --text-opacity: 1.0;
 color: rgba(220, 61, 34, var(--text-opacity)) }
.text-red-60 
{ --text-opacity: 1.0;
 color: rgba(183, 44, 20, var(--text-opacity)) }
.text-red-70 
{ --text-opacity: 1.0;
 color: rgba(142, 29, 10, var(--text-opacity)) }
.text-red-80 
{ --text-opacity: 1.0;
 color: rgba(98, 17, 3, var(--text-opacity)) }
.text-red-90 
{ --text-opacity: 1.0;
 color: rgba(51, 7, 0, var(--text-opacity)) }
.text-blue 
{ --text-opacity: 1.0;
 color: rgba(9, 148, 226, var(--text-opacity)) }
.text-blue-10 
{ --text-opacity: 1.0;
 color: rgba(204, 236, 254, var(--text-opacity)) }
.text-blue-20 
{ --text-opacity: 1.0;
 color: rgba(153, 218, 254, var(--text-opacity)) }
.text-blue-30 
{ --text-opacity: 1.0;
 color: rgba(104, 199, 252, var(--text-opacity)) }
.text-blue-40 
{ --text-opacity: 1.0;
 color: rgba(56, 180, 249, var(--text-opacity)) }
.text-blue-50 
{ --text-opacity: 1.0;
 color: rgba(9, 160, 245, var(--text-opacity)) }
.text-blue-60 
{ --text-opacity: 1.0;
 color: rgba(5, 129, 198, var(--text-opacity)) }
.text-blue-70 
{ --text-opacity: 1.0;
 color: rgba(2, 97, 150, var(--text-opacity)) }
.text-blue-80 
{ --text-opacity: 1.0;
 color: rgba(0, 65, 101, var(--text-opacity)) }
.text-blue-90 
{ --text-opacity: 1.0;
 color: rgba(0, 32, 51, var(--text-opacity)) }
.text-yellow 
{ --text-opacity: 1.0;
 color: rgba(215, 229, 66, var(--text-opacity)) }
.text-yellow-10 
{ --text-opacity: 1.0;
 color: rgba(250, 254, 204, var(--text-opacity)) }
.text-yellow-20 
{ --text-opacity: 1.0;
 color: rgba(243, 251, 156, var(--text-opacity)) }
.text-yellow-30 
{ --text-opacity: 1.0;
 color: rgba(234, 245, 111, var(--text-opacity)) }
.text-yellow-40 
{ --text-opacity: 1.0;
 color: rgba(222, 236, 69, var(--text-opacity)) }
.text-yellow-50 
{ --text-opacity: 1.0;
 color: rgba(207, 224, 30, var(--text-opacity)) }
.text-yellow-60 
{ --text-opacity: 1.0;
 color: rgba(171, 185, 18, var(--text-opacity)) }
.text-yellow-70 
{ --text-opacity: 1.0;
 color: rgba(132, 143, 9, var(--text-opacity)) }
.text-yellow-80 
{ --text-opacity: 1.0;
 color: rgba(90, 98, 3, var(--text-opacity)) }
.text-yellow-90 
{ --text-opacity: 1.0;
 color: rgba(46, 51, 0, var(--text-opacity)) }
.text-purple 
{ --text-opacity: 1.0;
 color: rgba(148, 97, 185, var(--text-opacity)) }
.text-purple-10 
{ --text-opacity: 1.0;
 color: rgba(233, 204, 254, var(--text-opacity)) }
.text-purple-20 
{ --text-opacity: 1.0;
 color: rgba(210, 160, 247, var(--text-opacity)) }
.text-purple-30 
{ --text-opacity: 1.0;
 color: rgba(186, 125, 231, var(--text-opacity)) }
.text-purple-40 
{ --text-opacity: 1.0;
 color: rgba(161, 97, 208, var(--text-opacity)) }
.text-purple-50 
{ --text-opacity: 1.0;
 color: rgba(135, 78, 176, var(--text-opacity)) }
.text-purple-60 
{ --text-opacity: 1.0;
 color: rgba(110, 46, 157, var(--text-opacity)) }
.text-purple-70 
{ --text-opacity: 1.0;
 color: rgba(84, 23, 129, var(--text-opacity)) }
.text-purple-80 
{ --text-opacity: 1.0;
 color: rgba(57, 7, 94, var(--text-opacity)) }
.text-purple-90 
{ --text-opacity: 1.0;
 color: rgba(29, 0, 51, var(--text-opacity)) }