Form Structures
Standard text inputs, layouts, inline combinations, floating fields, and stylized toggle switches for electronic health grids.
Input Types
Comprehensive text-based controls mapping clinical entries.This validation tag breaks automatically onto a secure secondary layout line.
Selects, Files & Ranges
Native browser overrides optimized for responsive alignment.Floating Labels (.form-floating)
Modern inline text containers collapsing placeholder text seamlessly.Checkboxes, Radios & Switches Matrix
Contextual colors and responsive alignment toggles.
Checkboxes
Inline Checkboxes
Disabled State
Colors Checkboxes
Radios (Mutual Exclusion)
Inline Radios
Disabled State
Colors Radios
Switches (.form-switch)
Disabled Switches
Colors Switches
Input Sizing, Rows & Grid Alignment
Form Row mapping, scale parameters, and horizontal layouts.
Scale Sizes (.form-control-sm / -lg)
Complex Form Row Combinations
Horizontal Form Label Alignment
Inline Form Structures (Compact Flow)
Input Groups
Prepending and appending text iconography labels or dropdown modifiers.
@
$
.00
Input Icons
Clean design tokens to seamlessly align interactive icons on the left or right inside text fields.
How to Use
To insert icons inside text input fields, wrap both the input and the icon elements inside an
.input-icon-group container.
- Left-aligned icons (default): Simply place the icon element inside the
.input-icon-groupcontainer. - Right-aligned icons: Add the
.input-icon-rightclass to the group wrapper and position the icon after the input element.