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

Readonly

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

<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

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>
    ...
  </select>
</div>
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

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. Each input element and optional label element should be wrapped 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.

<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

CSS variables

Customize the basic input element using the following CSS variables.

input, textarea, select {
  --border-width: 1px;
  --border-radius: 0;
  --box-shadow: inset 0 1px 2px hsl(0deg, 0%, 3.9215686275%, 0.1);
  --font-size: 1rem;
  --line-height: 1.5;
  --padding: 0.5rem;
  --background-color: var(--color-white);
  --border-color: hsl(0deg, 0%, 85.8823529412%, 1);
  --font-color: var(--color-black);
  --padding: 0.5rem;

  --focus-border-color: var(--color-info);
  --focus-box-shadow: 0 0 0 0.125em hsl(217deg, 71%, 53%, 0.25);

  --disabled-background-color: var(--color-disabled);
  --disabled-box-shadow: none;
  --disabled-font-color: var(--color-muted);
  --disabled-border-color: var(--color-disabled);

  --error-border-color: var(--color-danger);
  --error-background-color: var(--color-danger-alert);
  --error-font-color: var(--color-black);
}
Copy

Select elements have the additional variables.

.is-select {
  --arrow-color: hsl(232deg, 100%, 72%, 1);
  --arrow-width: 0.625em;
  --loading-spinner-speed: 0.8s;
  --loading-icon-width: 2px;
  --loading-icon-color: var(--color-light-grey);
}
Copy

You can customize form labels with these variables.

label {
  --font-size: 1rem;
  --font-weight: 600;
  --line-height: 1.6;
  --font-color: inherit;
}
Copy

Input groups also have their own set of variables.

.is-input-group {
  --background-color: var(--color-disabled);
  --border-color: hsl(0deg, 0%, 86%, 1);
  --border-width: 1px;
  --font-color: var(--color-black);
  --font-size: 1rem;
  --focus-color: var(--color-info);
}
Copy

Sass variables

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