A checkbox is used for multi-selection of items in a list of two items or more. For a single selection (on/off) use the toggle control. The partial checkbox is used in hierarchical trees, to indicate a selection of child elements within a parent folder.
Checkbox
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Radio buttons are used for specifying a single selection out of a list of up to six elements.
Radio
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 14px;
width: 14px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
A switch or toggle is used to switch between two opposite states. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding label.
Switch
height: 16px;
width: 24px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 16px;
width: 24px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 16px;
width: 24px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 16px;
width: 24px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 16px;
width: 24px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Sliders are used to select from a range of values on the same scale, such as volume control.
Slider
height: 10px;
width: 114px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 12px;
width: 114px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 12px;
width: 114px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 10px;
width: 114px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Date & Time pickers
height: 526px;
width: 304px;
border-radius: ;
border: 1px #000000;
background: #ffffff;
opacity: 1;
color: #000000;
height: 405px;
width: 304px;
border-radius: ;
border: 1px #000000;
background: #ffffff;
opacity: 1;
color: #000000;
