Skip to main content
To add nice styles to a form, simply add the .ui-form class. You’ll now get nice styling out of the box for Text Fields, Selects, Datepickers, Text areas and more.

​
Add Styling to a form

<form class="ui-form">
  ... 
</form>

​
Removing Styling on Individual Form Elements

<form class="ui-form">
  <input type="text" class="no-style" />
</form>

​
Input Groups

<div class="ui-input-group">
  <input id="first_name" type="text" placeholder="First Name">
  <input id="middle_name" type="text" placeholder="Middle Name">
  <input id="last_name" type="text" placeholder="Last Name">
</div>

​
Floating Labels

<div class="ui-floating-input mt-2">
  <input type="text" id="floating_example" placeholder=" ">
  <label for="floating_example">First Name</label>
</div>

​
Variables

--ui-input-border-width: 1px;
--ui-shared-element-border-radius: 10px;
--ui-shared-element-height-lg: 40px; 
--ui-shared-element-height: 36px;
--ui-shared-element-height-sm: 24px;
--ui-shared-element-padding-lg: 0 16px;
--ui-shared-element-padding: 0 12px;
--ui-shared-element-padding-sm: 0 8px;
--ui-shared-element-border-color: var(--ui-color-gray-300);
--ui-shared-element-box-shadow: var(--ui-shadow);