Skip to main content

Codebase 6 Forms

Codebase 6 form elements have simple background and focus styling.

Notes:

  1. Form elements do not have set width. You can control widths by one of two ways:
    • By adding the w-100% utility class to the form element, or
    • By involving the form elements as immediate children in flexbox or grid layouts.
  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.
  3. The font-family of form elements, buttons, and btn is controlled by var(--t-base-fs) (default is sans-serif).

Textual form input fields


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


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.

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.

Color picker

Invokes the device’s color picker.

File upload

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).

List and datalist

Text area (multiline)


Radio boxes and checkboxes

Radio boxes:



Checkboxes:





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 gap-tiny">
    <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 Codebase 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.

Adding colors to form elements

Border, background, and text color utilities can be used.

<label for="example-input-text">Label</label>

<input class="b-thick b-red" type="text" id="example-input-text" placeholder="Enter some text here">

<input class="b-thick b-green" type="text" id="example-input-text" placeholder="Enter some text here">

Form buttons

<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>

The btn class is used to style links as buttons. See components: buttons for more information.

Docs