Forms

Baselayer form elements have simple background and focus styling (no default border).

Notes:

1. In Baselayer, form elements do not have set width. You can control widths them by one of two ways (same as for buttons):
   • By adding the w100% utility class to the form element, or
   • By involving the form elements as immediate children of flex layout or grid layout wrappers.
2. Form inputs, textareas, buttons, and the btn class, have font-size: inherit. This means their font sizes can be modified by any font-size class in Baselayer.
3. The font-family of form elements, buttons, and btn is controlled by var(--base) (default is sans-serif).

Textual Form Input Fields

Text

Search

Email address
Expects an email address — on touch screens, this will invoke a keypad for entering emails.

Password

Url
Expects a web address — on touch screens, this will invoke a keypad for entering URLs.

Number Inputs

On touch screens, these inputs invoke the numeric keyboard instead of the text keyboard.

Telephone number

Number

Date and Time Inputs

On some devices (e.g. iOS Safari), these inputs get modified by date pickers, etc. The shape of the input fields gets changed.

Date

Date / Time local

Time

Color Picker

Invokes the device’s color picker.

Color

File Upload

File input

Note: File upload inputs <input type="file"> can break your page layout on the smallest phones in portrait orientation. But if you add class="w100%" that problem goes away.

Select and Multi-select

On some devices (e.g. iOS Safari), these inputs get modified by number pickers (dropdowns).

Example select 1 2 3 4 5

Example multiple select 1 2 3 4 5

Text Area (Multiline)

Example textarea

Radio Boxes and Checkboxes

Radio boxes:

Banana
Mango
Coconut (disabled)

Checkboxes:

Strawberry
Chocolate
Vanilla

Fieldsets and Legends

Groups of form elements can be wrapped in <fieldset> tags. Add a <legend> to provide a special title for the entire fieldset.

Example e-newsletter subscribe

<form action="">
  <fieldset class="flex">
    <legend>Example e-newsletter subscribe</legend>
    <input class="w100%" type="email" id="example-input-email" placeholder="Enter email">
    <input type="submit" name="submit" value="Subscribe">
  </fieldset>
</form>

Note: In the example above, the Baselayer flex class has been used to align these form elements side-by-side, and then grow has been used to expand the email input field. A <legend> is also included — but since its text incorporates with the <fieldset> wrapping border line, it will not be controlled by the flexbox rule.

Form Buttons

Button

<form action="">
  <p>
    <button type="button" name="button">Button</button>
    <input type="button" name="input" value="Input Button">
    <input type="submit" name="submit" value="Submit Button">
    <input type="reset" name="reset" value="Reset Button">
  </p>
</form>

See buttons for more information.