WebUI mobile-first CSS

Textboxes

Textbox Styling

The simplest way to style form controls is to use a single class to set the form control type and size. The syntax is [control type]-[control size].

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <input type="text" placeholder="Textbox 1" class="input-sm">
  </div>
  <div class="col">
    <input type="text" placeholder="Textbox 2" class="input-md">
  </div>
  <div class="col">
    <input type="text" placeholder="Textbox 3" class="input-xl">
  </div>		
</div>
                                      
      
HTML

Input Widths

The width of input controls can be changed by using any of the utility classes, such as width-full to make the control expand to the width of its container element or other width-* classes to set a fixed width.

Textbox Sizes

When un-sized, the height of the control will depend on the font size. In the example below, the first textbox is un-sized and inherits an extra small font-size from the row which has the class text-xs applied. The input class can be used without adding the suffix -xs, -sm, -md, -lg, -xl, etc., which means the height of the element will only expand to accomodate its content with a small amount of padding by default. Textboxes can be set to one of the sizes provided or be set to un-sized.

    
  


<div class="row col-padding-sm">
  <div class="col">
    <div class="row text-xs">
      <div class="col">
        <input type="text" class="input width-lg">
      </div>
    </div>
    <div class="row">
      <div class="col">
        <input type="text" class="input-xs width-lg">
      </div>
    </div>
    <div class="row">
      <div class="col">
        <input type="text" class="input-sm width-lg">
      </div>
    </div>
    <div class="row">
      <div class="col">
        <input type="text" class="input-md width-lg">
      </div>
    </div>
    <div class="row">
      <div class="col">
        <input type="text" class="input-lg width-lg">
      </div>		
    </div>
    <div class="row">
      <div class="col">
        <input type="text" class="input-xl width-lg">
      </div>		
    </div>
  </div>
</div>
                                                          
      
HTML

Textbox Size Classes

The following classes may be used to set the height of input fields including single selection select elements.

Classes	Height
input-xs	1.5rem
input-sm	1.75rem
input-md	2.375rem
input-lg	2.475rem
input-xl	2.825rem
input	Un-sized - expands with font size

Textbox sizing

It is recommended that the height of textboxes and dropdowns is not customised, since the height is preset to match other form controls such as buttons and labels.

Textareas

Textarea Styling

Textareas can be styled using the control class. Then any of the width-* and height-* classes can be added to set the size of the control. Most browsers support a resize handle for textareas, but resizing the width is prevented in WebUI to avoid potential form layout distortions.

    
<div class="row">
  <div class="col">
    <textarea class="control height-lg width-two-thirds">
  </div>
</div>
                                                          
HTML

Control Hints

Control Hint Styling

The control-hint and control-hint-border classes can be used to create floating control hints for textboxes and textareas.

Control hint example

Control hint border example

Control hint example

    
  

  
<div class="row">
  <div class="col pad-md">
    <div class="control-hint">
      <input id="textControlHint" type="text" class="input-lg rounded-sm width-full" placeholder="default" />
      <label for="textControlHint" class="color-muted background-light">Control hint example</label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col pad-md">
    <div class="control-hint-border">
      <input id="textControlHintBorder" type="text" class="input-lg rounded-sm width-full" placeholder="default" />
      <label for="textControlHintBorder" class="color-muted background-light">Control hint border example</label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col pad-md">
    <div class="control-hint-border">
      <textarea id="textareaControlHint" class="control height-lg" placeholder="default"></textarea>
      <label for="textareaControlHint" class="color-muted background-light">Control hint example</label>
    </div>
  </div>
</div>
                                                          
      
HTML

Control Hint Classes

There are 2 control hint classes available as follows.

Class	Description
control-hint	Create a floating control hint for textboxes and textareas. Hint retreats to just below the top of the control when it receives focus.
control-hint-border	Create a floating control hint for textboxes and textareas. Hint retreats to cover the top border when control receives focus.

Minimum Control Height

NOTE: Any control used with control hints will have a minimum height of 2.475rem, which means that any textbox smaller than -lg will be resized to -lg.

Placeholder

A placeholder must be present in order for the control hints to work correctly. It doesn't matter what value is used for the placeholder so long as it is not empty - it will be hidden when a control hint is added.

Select Controls

Dropdown List / Select

Select elements can be styled using the same input classes as textboxes - this ensures that the height and style will match for all input controls. If the select is being used as a multi-select list, where you need to define the height, then the control class should be used instead of using input-* classes - any of the height-* classes can be added to set the height. See the following example.

    
  


<div class="row gap-sm">
  <div class="col-fixed">
    <select class="input-sm width-lg-xl">
      <option value="1">Austria</option>
      <option value="3">Bulgaria</option>
      <option value="4">Canada</option>
      <option value="5">Denmark</option>
      <option value="6">England</option>
      <option value="7">Finland</option>
      <option value="8">Germany</option>
    </select>
  </div>
  <div class="col">
    <select class="control height-lg width-lg-xl scroll-y" multiple>
      <option value="1">Austria</option>
      <option value="3">Bulgaria</option>
      <option value="4">Canada</option>
      <option value="5">Denmark</option>
      <option value="6">England</option>
      <option value="7">Finland</option>
      <option value="8">Germany</option>
    </select>
  </div>	
</div>
                                                              
      
HTML

Checkboxes and Radio Buttons

Checkboxes

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="checkbox control-success">
      <input type="checkbox" value="1" id="checkbox1" />
      <label for="checkbox1"></label>
    </div>    
  </div>
  <div class="col">
    <div class="checkbox control-info">
      <input type="checkbox" value="2" id="checkbox2" />
      <label for="checkbox2"></label>
    </div>
  </div>
  <div class="col">
    <div class="checkbox control-disabled">
      <input type="checkbox" value="3" id="checkbox2" disabled />
      <label for="checkbox3"></label>
    </div>   
  </div>
</div>
        
      
HTML

Checkbox Toggle Switches

    
  

  
<div class="row col-padding-md">
  <div class="col">
    <div class="toggle-switch-lg yesno">	
      <input type="checkbox" value="1" id="check-switch-1" />
      <label for="check-switch-1" class="warning-light rounded-sm text-xl">
        <div class="toggle-switch-button background-warning left-transition-medium"></div>
      </label>
    </div>
  </div>
  <div class="col">
    <div class="toggle-switch-xs onoff">	
      <input type="checkbox" value="2" id="check-switch-2" />
      <label for="check-switch-2" class="success-dark rounded-sm text-xl">
        <div class="toggle-switch-button background-success left-transition-medium"></div>
      </label>
    </div>
  </div>
  <div class="col">
    <div class="toggle-switch">	
      <input type="checkbox" value="3" id="check-switch-3" />
      <label for="check-switch-3" class="info-light rounded-pill">
        <div class="toggle-switch-button background-info left-transition-short"></div>
      </label>
    </div>
  </div>
  <div class="col">
    <div class="toggle-switch-sm check">	
      <input type="checkbox" value="4" id="check-switch-4" disabled />
      <label for="check-switch-4" class="accent-4-light rounded-sm">
        <div class="toggle-switch-button background-dark left-transition-short"></div>
      </label>
    </div>
  </div>
</div>     
  
      
HTML

Checkbox Toggle Buttons

Check 1 (preselected)

Check 2

Check 3

    
  

  
<div class="control-group pad-top-md">
  <div class="toggle-button-sm toggle-button-accent-1">			
    <input type="checkbox" id="checkButton1" checked>
    <label for="checkButton1" class="transition-medium">Check 1 (preselected)</label>
  </div>
  <div class="toggle-button-sm toggle-button-accent-1">
    <input type="checkbox" id="checkButton2"> 
    <label for="checkButton2" class="transition-medium">Check 2</label>
  </div>
  <div class="toggle-button-sm toggle-button-accent-1">
    <input type="checkbox" id="checkButton3"> 
    <label for="checkButton3" class="transition-medium">Check 3</label>
  </div>
</div>
        
      
HTML

Radio Buttons

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="radio control-success">
      <input type="radio" value="1" name="radiogroup1" id="radio1" />
      <label for="radio1"></label>
    </div>    
  </div>
  <div class="col">
    <div class="radio control-info">
      <input type="radio" value="2" name="radiogroup1" id="radio2" />
      <label for="radio2"></label>
    </div>
  </div>
  <div class="col">
    <div class="radio control-disabled">
      <input type="radio" value="3" name="radiogroup1" id="radio3" disabled />
      <label for="radio3"></label>
    </div>
  </div>
</div>
        
      
HTML

Radio Button Toggle Switches

    
  

  
<div class="row col-padding-md">
  <div class="col">
    <div class="toggle-switch-lg check">	
      <input type="radio" value="1" id="radio-switch-1" name="radio-switch" />
      <label for="radio-switch-1" class="info-dark rounded-sm">
        <div class="toggle-switch-button background-info left-transition-medium"></div>
      </label>
    </div>
  </div>
  <div class="col">
    <div class="toggle-switch-xs onoff">	
      <input type="radio" value="2" id="radio-switch-2" name="radio-switch" />
      <label for="radio-switch-2" class="accent-2-dark rounded-pill">
        <div class="toggle-switch-button background-accent-2 left-transition-medium"></div>
      </label>
    </div>
  </div>
  <div class="col">
    <div class="toggle-switch-md onoff">	
      <input type="radio" value="3" id="radio-switch-3" name="radio-switch" disabled />
      <label for="radio-switch-3" class="accent-3-light rounded-sm text-lg">
        <div class="toggle-switch-button background-accent-3 left-transition-medium"></div>
      </label>
    </div>
  </div>
  <div class="col">
    <div class="toggle-switch-xs onoff">	
      <input type="radio" value="4" id="radio-switch-4" name="radio-switch" />
      <label for="radio-switch-4" class="accent-3-light rounded-sm text-lg">
        <div class="toggle-switch-button background-accent-3 left-transition-medium"></div>
      </label>
    </div>
  </div>
</div> 
        
      
HTML

Radio Toggle Buttons

Radio 1 (preselected)

Radio 2

Radio 3

    
  

  
<div class="control-group pad-top-md">
  <div class="toggle-button-sm toggle-button-accent-1">			
    <input type="radio" name="radioButton" id="radioButton1" checked>
    <label for="radioButton1" class="transition-medium">Radio 1 (preselected)</label>
  </div>
  <div class="toggle-button-sm toggle-button-accent-1">
    <input type="radio" name="radioButton" id="radioButton2"> 
    <label for="radioButton2" class="transition-medium">Radio 2</label>
  </div>
  <div class="toggle-button-sm toggle-button-accent-1">
    <input type="radio" name="radioButton" id="radioButton3"> 
    <label for="radioButton3" class="transition-medium">Radio 3</label>
  </div>
</div>
                    
      
HTML

Checkbox and Radio Classes

The light-mode and dark-mode classes may be used to change the check mark and background to work in light or dark color themes.

Class	Description
checkbox	Defines a custom checkbox. Applied to the control root element.
radio	defines a custom radio button. Applied to the control root element.
toggle-switch	Defines a custom toggle switch. Applied to the control root element.
light-mode	Changes the check mark to a dark color and the background to a light color when used for custom checkboxes and radio buttons. Sets the unchecked color theme to light for toggle switches. Applied to the control root element.
dark-mode	Changes the check mark to a light color and the background to a dark color when used for custom checkboxes and radio buttons. Sets the unchecked color theme to dark for toggle switches. Applied to the control root element.

Color Modes

For more information on the light-mode and dark-mode classes see the Color Modes section.

Range Controls

Range Control Examples

0 25 50 75 100

0
25
50
75
100

0
25
50
75
100

    
  

  
<div class="range-series width-full color-accent-4">
  <span>0</span>
  <span>25</span>
  <span>50</span>
  <span>75</span>
  <span>100</span>
</div>
<input type="range" value="25" min="0" max="100" class="range width-full" />

<div class="row-spacing-xl"></div>

<div class="row">
  <div class="col">
    <input type="range" value="25" min="0" max="100" class="range range-sm range-dark width-full" />
  </div>
</div>
<div class="row">
  <div class="col">
    <ul class="range-series list width-full color-accent-4">
      <li>0</li>
      <li>25</li>
      <li>50</li>
      <li>75</li>
      <li>100</li>
    </ul>
  </div>	
</div>

<div class="row-spacing-xl"></div>

<div class="row">
  <div class="col">
    <input type="range" value="25" min="0" max="100" class="range range-lg range-rounded range-accent-1 width-full" />
  </div>
</div>
<div class="row">
  <div class="col">
    <ul class="range-series list width-full color-info">
      <li>0</li>
      <li>25</li>
      <li>50</li>
      <li>75</li>
      <li>100</li>
    </ul>
  </div>	
</div>
                                                      
      
HTML

Range Control Classes

The range control classes available are listed below.

Class	Description
range	The mandatory class for range control styling.
range-xs, range-sm, range-md, range-lg, range-xl	Specifies the overall height of the range control (Can be used for vertical separation from other elements).
range-[WebUI color suffix]	Specifies the range control color. The color suffix can be one of the standard WebUI palette colors (Not success, info, warning or danger).
range-rounded	Specifies that the range control thumb should be round instead of a rectangle.
range-series	Used to style a range control series.

Progress Controls

Progress Control Examples

25%

    
<div class="progress progress-accent-2 width-full rounded-sm">			
  <progress value="25" max="100" id="progressbar"></progress>
  <div class="progress-label color-dark">25%</div>  
</div>
                                                      
HTML

Progress Control Classes

The progress control classes available are listed below.

Classes	Description
progress	The mandatory class for progress control wrapper element.
progress-[WebUI color suffix]	Specifies the progress control color. The color suffix can be one of the standard WebUI palette colors (Not success, info, warning or danger).
progress-labal	Class for a supplimentary overlay text.

Control Classes

Control classes used for default, validation and highlight styling.

Class	Description
control	Styles an element to the default form control color and padding style.
control-success	Styles an element to the theme success style. Textboxes and buttons will automatically show a check icon.
control-info	Styles an element to the theme info style. Textboxes and buttons will automatically show an info icon.
control-warning	Styles an element to the theme warning style. Textboxes and buttons will automatically show a warning icon.
control-danger	Styles an element to the theme danger style. Textboxes and buttons will automatically show a danger icon.
control-highlight	Styles an element to the theme highlight style.
control-disabled	Styles an element to the theme disabled style.
control-message	Sets the visibility of an element to hidden. This class is used in form validation functions.

The control class is useful when form controls such as textareas or selects need to match the appearance of other controls. It adds a border in the default theme style and can also be used to style almost any element. Textbox and button form controls do not need the control class because there are specific classes for those elements.

When using a control-success, control-info, control-warning or control-danger class on textboxes or buttons a corresponding icon is added automatically. But for other controls such as a textarea, the class instrumentation must be added to show an icon.

Any form controls where specific classes are not available require the control class in order to use control-[theme] and instrumentation classes. See the following example.

    
  

      
<div class="row col-padding-lg">
  <div class="col">
    <textarea class="control width-lg height-md-lg"></textarea>
  </div>
  <div class="col">
    <textarea class="control control-success instrumentation width-lg height-md-lg"></textarea>
  </div>
  <div class="col">
    <div class="control control-info instrumentation width-lg height-md-lg"></div>
  </div>
</div>
                                                                                        
      
HTML

Labels

Control label classes used to match the height of form controls.

Class	Height
control-label	1rem
control-label-xxs	1.25rem
control-label-xs	1.5rem
control-label-sm	1.75rem
control-label-md	2.375rem
control-label-lg	2.475rem
control-label-xl	2.825rem
control-label-xxl	3.125rem

The control label classes are sized to match standard form control heights.

NOTE: The control-label-* classes are not required in flexbox and grid based layouts because other alignment properties are available.

First name

    
<div class="container control-group gap-horizontal-lg">
  <label class="control-label-sm">First name</label>
  <input id="FirstName" type="text" class="input-sm rounded-sm" />
</div>
                                                                                              
HTML

Control Grouping

The control grouping classes available are listed below.

Class	Description
control-group	Groups elements by setting the display property to table, and the immediate child elements to table-cell.
control-group-append	Groups elements by adjusting the word spacing property.
control-group-success	Applies success styling to a group of form controls. Textboxes and buttons will automatically show a check icon.
control-group-info	Applies info styling to a group of form controls. Textboxes and buttons will automatically show an info icon.
control-group-warning	Applies warning styling to a group of form controls. Textboxes and buttons will automatically show a warning icon.
control-group-danger	Applies danger styling to a group of form controls. Textboxes and buttons will automatically show a danger icon.
control-group-disabled	Applies disabled styling to a group of form controls.

The control-group and control-group-append classes may be used to adjoin elements such as buttons together, while the other classes above are used to add styling to a group of controls.

    
  

  
<div class="control-group pad-md">
  <button class="button-sm button-info background-focus-info-dark rounded-left-sm transition-long">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
  </button>
  <button class="button-sm button-info background-focus-info-dark transition-long">1</button>
  <button class="button-sm button-info background-focus-info-dark transition-long">2</button>
  <button class="button-sm button-info background-focus-info-dark transition-long">3</button>
  <button class="button-sm button-info background-focus-info-dark rounded-right-sm transition-long">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>
  </button>
</div>
                                                
      
HTML

Control Grouping

The control-group and control-group-append classes are provided for use when only basic WebUI styles are used. Otherwise, it is recommended that flexbox and layout properties are used in preference.

A list of layout properties can be found in the Layout Properties section.

Group Validation Styling

Styles can be applied to a group of form controls by using one of the control-group-* classes, which must be added to the parent element of the controls that require styling.

In addition to changing the colour of the controls, a validation icon will be added inside the control on the right if it is an HTML input or button. You can also force any individual HTML element to have a validation icon by adding the instrumentation class to it, where the element type would not normally be given one, such as a textarea or div.

First name

Address

    
  

      
<div class="row col-padding-sm control-group-success">
  <div class="col-6 control-label-sm">
    First name
  </div>
  <div class="col">
    <input id="firstName" type="text" class="input-sm width-full rounded-sm" />
  </div>
</div>

<div class="row col-padding-sm control-group-danger">
  <div class="col-6 control-label-sm">
    Address
  </div>
  <div class="col">
    <textarea id="address" class="control height-md instrumentation"></textarea>
  </div>
</div> 
                                                                                                  
      
HTML