Input Controls
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: 237px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 66px;
width: 93px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 93px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Radio
Radio buttons are used for specifying a single selection out of a list of items.
height: 36px;
width: 237px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
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: 237px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 66px;
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.
Single value
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: 44px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 44px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 45px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 44px;
width: 72px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Date Picker
The date picker is a complex component used to choose a specific date. It can be combined with a time picker to allow users to choose date and time values.
Date Pickers
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 & Time Picker
height: 522px;
width: 304px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
