Checkbox
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.
height: 36px;
width: 235px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 72px;
width: 93px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 93px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Radio Button
Radio buttons are used for specifying a single selection out of a list of up to six elements.
height: 36px;
width: 235px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Switch
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.
height: 36px;
width: 235px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 72px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Slider
Sliders are used to select from a range of values on the same scale, such as volume control.
height: 30px;
width: 182px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Range
height: 54px;
width: 182px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 60px;
width: 80px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 60px;
width: 80px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 60px;
width: 80px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 60px;
width: 80px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Picker
Date picker
height: 401px;
width: 304px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 401px;
width: 304px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Date and time picker
height: 522px;
width: 304px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
