Form Elements

Build quick and clean forms with generic form elements

Basic inputs

Basic HTML input elements have 100% width and work best when used alongside OrbitCSS' grids.

<div class="column is-half">
  <input type="text" placeholder="HTML text input">
</div>
Copy

Input controls

The readonly attribute will prevent modification of the input element's value.

Readonly

<input type="text" placeholder="Readonly text input" readonly>
Copy

Disabled

The disabled attribute is similar to the readonly attribute but will also grey out the input element and retain the pointer cursor.

<input type="text" placeholder="Disabled text input" disabled>
Copy

Labels

Label elements will neatly sit above the input element.

<div class="column is-half">
  <label>Name</label>
  <input type="text">
</div>
Copy

Inline labels

You can use columns to create inline labels and the is-inline-label modifier to vertically align the label.

<div class="column is-shrink is-inline-label">
  <label>Name</label>
</div>
<div class="column is-half">
  <input type="text">
</div>
Copy

The is-inline-label modifier can actually be used on any content, not just labels.


Select

Use the is-select modifier to create a clean and simple select element.

<div class="is-select">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>
Copy

The is-loading modifier can be used to replace the arrow with a loading spinner.

<div class="is-select is-loading">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>
</> Show code 
Copy

Multiple select

If you are withing a multiple select element, you'll want to use the is-multiple-select modifier on the div wrapper and the multiple attribute on the select element.

<div class="is-multiple-select">
  <select multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
</div>
Copy

Textarea

Textareas are simply a multi-line version of the input element.

<textarea rows="3"></textarea>
Copy

Resizing

If you want the textarea to be resizable, use one of the following modifiers:

  • has-resize
  • has-resize-vertical
  • has-resize-horizontal
<textarea rows="3" class="has-resize"></textarea>
Copy

The has-resize-vertical and has-resize-horizontal modifiers will limit resizing to only either the x (horizontal) or y (vertical) axis.


Checkbox

Use the is-checkbox modifier to create a flexbox powered checkbox container. Each input element and optional label element should be wrapped in a span .

<div class="is-checkbox">
  <span>
    <input type="checkbox">
    <label>Cats</label>
  </span>
  <span>
    <input type="checkbox">
    <label>Dogs</label>
  </span>
  <span>
    <input type="checkbox">
    <label>Ducks (the obvious choice)</label>
  </span>
</div>
Copy

Radio

Just like the checkbox, the is-radio modifier will create a flexbox powered container for your radio fields. Don't forget to wrap each input element and optional label element in a span

<div class="is-radio">
  <span>
    <input type="radio" name="fav-animal">
    <label>Cats</label>
  </span>
  <span>
    <input type="radio" name="fav-animal">
    <label>Dogs</label>
  </span>
  <span>
    <input type="radio" name="fav-animal">
    <label>Ducks (the obvious choice)</label>
  </span>
</div>
Copy

Input group

The is-input-group modifier can be used to group form elements inline.

+61
<div class="is-input-group">
  <span>+61</span>
  <input type="text" placeholder="Your phone number">
</div>
Copy

All span and label HTML elements will be displayed in a bordered box with a light background, only taking up as much room as required to display their inner content.

%
<div class="is-input-group">
  <label>Percentage:</label>
  <input type="number" value="20">
  <span>%</span>
</div>
Copy

Each input and select element will divide up the remaining space equally.

<div class="is-input-group">
  <div class="is-select">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
  <input type="text">
</div>
Copy

Input groups also support the use of Buttons.

<div class="is-input-group">
  <input type="text">
  <button class="button is-primary">Search</button>
</div>
Copy

Form errors

The has-error modifier can be used to indicate an error. This will add a red border and background to input , textarea and select elements.

<input type="text" class="has-error">
Copy
<textarea class="has-error"></textarea>
Copy
<div class="is-select">
  <select class="has-error">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>
Copy

File input

You can create a clean and modern looking file input using the is-file-input modifier and a button.

<div class="is-file-input">
  <input type="file" id="exampleFileInput">
  <label for="exampleFileInput" class="button is-primary">
    <span>Upload File</span>
    <span class="icon">
      <i class="fas fa-upload"></i>
    </span>
  </label>
</div>
Copy

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.

Variable Type Default Value
$input-background-color color $white
$input-border-color color #dbdbdb
$input-border border 1px solid $input-border-color
$input-border-radius units 0
$input-color color inherit
$input-shadow box-shadow inset 0 1px 2px rgba(10,10,10,.1)
$input-font-size units 1rem
$input-line-height unitless 1.5
$input-padding units 0.5rem
$input-focus-border color $info
$input-focus-shadow box-shadow 0 0 0 0.125em rgba(50,115,220,.25)
$input-disabled-background color $disabled
$input-disabled-border color $disabled
$input-disabled-color color #afafaf
$select-arrow-color color #7284ff
$select-arrow-height units 0.625em
$select-arrow-width units 0.625em
$select-padding units 0.5rem
$select-multiple-padding padding .5rem 1rem
$label-font-weight unitless 600
$label-bottom-margin units 0.375rem
$label-line-height unitless 1.6
$label-font-size units 1rem