This guide explores the various form elements available in Trongate CSS and demonstrates their behaviors, states, and common usage patterns.
Input Field States
Every form input has multiple visual states to provide clear user feedback:
<!-- Default state -->
<input type="text" placeholder="Default state">
<!-- Focused state (click to see) -->
<input type="text" placeholder="Click here to see focus state">
<!-- Disabled state -->
<input type="text" placeholder="This input is disabled" disabled>
Input Type Variations
Different input types provide specialized functionality while maintaining consistent styling:
<label>Search with Validation</label>
<input type="search" required placeholder="Enter search term...">
<label>Numbers with Controls</label>
<input type="number" min="0" max="100" value="50">
Select Elements
Select dropdowns support option grouping for better organization:
In the example below, two buttons are positioned side-by-side by adding the .flex-row class to a containing element.
Below is the source code for the example shown above. Notice how the second form field contains a class of .ml-1. The purpose of this additional class is to add a left margin (with a value of '1em') onto the second form field element, thereby creating a small gap between the two form fields.
The example below uses .flex-row, a little custom CSS to produce an attractive horizontal search bar. The search button contains a Font Awesome icon. The icon depicts a small magnifying glass (a commonly used icon for submit buttons that appear on search forms).
To get the magnifying glass icon appearing, you'll have to load Font Awesome into your webpage. This can be achieved by adding the following line of code onto the <head> section of your webpage: