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>
The readonly
attribute will prevent modification of the input element's value.
<input type="text" placeholder="Readonly text input" readonly>
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>
Label elements will neatly sit above the input element.
<div class="column is-half">
<label>Name</label>
<input type="text">
</div>
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>
The is-inline-label
modifier can actually be used on any content, not just labels.
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>
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
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>
Textareas are simply a multi-line version of the input element.
<textarea rows="3"></textarea>
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>
The has-resize-vertical
and has-resize-horizontal
modifiers will limit resizing to only either the x (horizontal) or y (vertical) axis.
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>
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>
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>
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>
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>
Input groups also support the use of Buttons.
<div class="is-input-group">
<input type="text">
<button class="button is-primary">Search</button>
</div>
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">
<textarea class="has-error"></textarea>
<div class="is-select">
<select class="has-error">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
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>
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 |