Inputs & Forms

Inputs
The form components are set to be flexible in various styling applications see below for examples of each click the element and make styling adjustments if needed, however do not remove classes here, combine them if needed.
Element
Font Size
Line Height
Border
Border Color
Padding
Background
Default: Input
1em
1.5em
1.5px
medium-light
1em
White
Small: Input
0.745em
1.4em
1.5px
medium-light
0.75em 0.6em
White
Input Class Parameters
the values are the class names which can be combined to define the purpose of the element.
Type
Value
Size
small
large
Rounded
rounded
Error
error
Border
no-border
no-border-top
no-border-bottom
no-border-left
no-border-right
Label
label
inset
no-bottom
Input Error
We add the class .error to the container and to the input to allow the styling to apply
Oops! Something went wrong while submitting the form.
Input With Icon
Icons are wrapped and positioned for sit within the form
Input With Overlay Label
Labels rapped in the container
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Switches, Radios & Checkboxes
Radio buttons work correctly when published. labels have the bottom margin removed with the no-bottom class
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Field
Simple text field with extended classes for individual styles
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Element
Font Size
Line Height
Border
Border Color
Padding
Background
default
1em
1.5em
1.5px
medium-light
0.8em 1.2em
White
Select Field
We use a custom html block nested inside a div to allow you to use a custom icon for the dropdown icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Element
Font Family
UTF
Right
Top
Size
select
inhert
1em
custom code
straple icons
\f078
1em
0.75em
1.2em