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;

Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates

Contributeย  |ย  Updates