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