Input Styling

These design standards are in place to ensure the inputs used in forms within your app are consistent with brand guidelines and accessibility standards


Placement

There are no hard rules for the placement of inputs; you will often use them to construct forms that need to be filled out and submitted


Behavior

The behvaior of each input and its changes between states can be seen in the examples below.

Instructions

All form elements will need to be in a div with the "ila-input-group" class applied, and inputs will need classes assigned from the list below.
All the names should be self explanitory. This is needed to have enough specificity to override the default styles from the Illinois Framework.
Widths on all elements below are set on this page for demonstration purposes.

Radio Buttons: ila-radio
Checkboxes: ila-checkbox
Standard Inputs (text, tel, pass, etc): ila-input
Calendar: ila-calendar
Search: ila-search
Dropdown: ila-select
Text Area: ila-textarea


Example

Radio Buttons:


Checkboxes:



Inputs:



Calendar Select:



Search Select:



Select Dropdown:




Text Area:



Standard File Upload

No file selected...

Disabled File Upload

Upload disabled


Toggle Button



Link

Follow this link to the design standard in the GitHub repository.