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 Picker

The date picker is a complex component and is used to choose a specific date and/or time. Please check Figma for detailed specs.

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;

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates