Forms

Form element utility classes

There are only two form utility classes, and these are:

• form-element-sm (can be paired with btn-sm)
• form-element-lg (can be paired with btn-lg)

Note: since Codebase 5.2.3, smaller form elements have smaller text, and larger form elements have larger text.

Examples:

<input class="form-element-sm" id="text-example" name="examplename" placeholder="Example text input field" type="text">
<input id="text-example" name="examplename" placeholder="Example text input field" type="text">
<input class="form-element-lg" id="text-example" name="examplename" placeholder="Example text input field" type="text">

Other things you can do with forms

Besides the form-element classes above, you can change border thickness, background and border colors, and rounded corners.

Go large – to grab people’s attention:

<input 
  id="email-example" 
  class="form-element-lg b-thick b-success rounded-pill unrounded-right p-3 t-lg bg-green-200" 
  name="examplename" 
  placeholder="Your email" 
  type="email"
>
<button 
  aria-label="Submit" 
  type="submit" 
  class="btn btn-success btn-lg b-thick b-success rounded-pill unrounded-left p-3 t-lg"
>Subscribe</button>

Go small – to fit a form into a menubar, or into a table cell:

<input 
  type="search" 
  class="form-element-sm b-primary unrounded-right bg-purple-100" 
  id="site-search" 
  name="site-search" 
  autocomplete="off" 
  aria-label="" 
  placeholder="Search"
>
<button 
  aria-label="Search"
  class="btn btn-primary btn-icon btn-sm unrounded-left"
>
  <!-- Search icon -->
</button>

See buttons.