Form inputs

Available input styles and variations

Get Started

1

Default inputs

Standard inputs

Control the sizes of inputs by adding .is-small, .is-medium or .is-large to a text input.

SHOW CODE

Rounded inputs

Make the edges rounded by adding the .rounded class.

SHOW CODE

Focus colors

Control colors when inputs are focused by adding .is-primary-focus, .is-secondary-focus or .is-accent-focus to a text input.

SHOW CODE

With icons

You can add icons to inputs, either on the left side, on the right side or both. You need to add .has-icons-left, .has-icons-right or both to the .control wrapper. Check out the code examples to learn more.

SHOW CODE

Validation

To show success or error states, add the .required class to the .control wrapper. You can the add the .has-success and .has-error classes to the same wrapper to apply one of theses states.

Everything is alright Something went wrong
Everything is alright Something went wrong
Everything is alright Something went wrong
Everything is alright Something went wrong
SHOW CODE
2

Material inputs

Material inputs

Change border color when inputs are focused by adding .is-primary, .is-secondary or .is-accent to the .control-material wrapper.

SHOW CODE

With icons

You can add icons to material inputs, only on the right side. You need to add .has-icon to the .control-material wrapper. Check out the code examples to learn more.

face
face
face
SHOW CODE

Validation

To show success or error states, add the .required class to the .control-material wrapper. You can the add the .has-success and .has-error classes to the same wrapper to apply one of theses states.

done
close
Everything is alright Something went wrong
done
close
Everything is alright Something went wrong
SHOW CODE
3

Textareas

Textarea

Change border colors when textareas are focused by adding .is-primary-focus, .is-secondary-focus or .is-accent-focus to a .textarea text area.

SHOW CODE

Animated textarea

Add the class .is-grow to a .textarea element to expand it on focus.

SHOW CODE

<textarea class="textarea is-grow" rows="5" placeholder="Focus me, i can grow ..."></textarea>
                                    

Button textarea

You can have a button inside a textarea by adding the class is-button. Check out the code example for more details.

SHOW CODE

<div class="control">
    <textarea class="textarea is-button" placeholder="write something..."></textarea>
    <div class="textarea-button">
        <button class="button accent-btn btn-align raised">Update</button>
    </div>
</div>
                                    

Material textarea

Material textareas behave the same way than the material inputs. Add .is-primary, .is-secondary or .is-accent to the .control-material wrapper to change border color on focus.

SHOW CODE
4

Input States

Loading inputs

Inputs can be set to loading state by adding the .is-loading class to the .control wrapper. Based on the input size modifier, you have to have to add the same modifier to the wrapper for optimal positioning. Check the code examples.

SHOW CODE

Disabled inputs

Add the .is-disabled class to an input element to disable it.

SHOW CODE
5

Selects

Basic select

You can create a basic select by wrapping an html select element with div that has the .select class.

Select sizes

Basic selects can have different sizes: small, default, medium and large. To change the select size, add the .is-small, .is-medium or .is-large class to the div.select wrapper element.

Select with icon

Basic selects have icon support for all sizes. See the markup structurefor more details.

SHOW CODE

Chosen select

Chosen is a jQuery library that helps you generating beautiful select boxes. You can find the plugin documentation on the github project repository.

Option groups

Chosen supports option groups. Insert your options inside an <optgroup label=""></optgroup> tag to create structured options lists.

Chosen select with search

Chosen lets you define a search threshold by setting the option disable_search_threshold: (number). If the number of options is higher than the specified number, a search filed is activated inside the select's dropdown.

Chosen select multiple

Chosen can be easily turned into a multiple select. You can also control how many options can be selected at the same time by using the max_selected_options: (number). In the following example, only 5 items can be selected at the same time.

6

Tags input

Basic example

Tags inputs are handled with a simple jQuery plugin. You can find the documentation here. Use the example below, enter a tag and add it by pressing the ENTER key. Some options are available, like minimum / maximum tag size and max total caracter length.

7

Autocomplete

Basic autocomplete

This is an example of a basic autocomplete getting data from an external json source. The plugin's documentation can be found here.

With description

With one of the built in templates, you can easily display an additional description.

User template

You can also create your own custom templates. This is an example showing a user search use case.

8

Datepickers

Jquery datepicker

A lightweight and easy to implement datepicker. Supports options and multiple instances. Documentation can be found here.

Datedropper

A powerful and fancy datepicker with many features. Supports many options and custom theming. Documentation can be found here.

9

Timepickers

12 hours Wickedpicker

Wickedpicker is a lightweight timepicker plugin. This example demonstrates a 12 hours clock. Read the documentation

24 hours Wickedpicker

Another example demonstrating a 24 hours clock.

Timedropper

An original time picker library that focuses on user experience when setting time. Documentation can be found here.

10

Range

Basic range

A range input custom style that works in all major browsers.

Range sizes

Range inputs can have different sizes, add the .is-small, .is-medium or .is-large to change the input size.

Range colors

Range inputs can have different colors. Available color classes are default, .is-info, .is-success, .is-warning, .is-danger, .is-primary, .is-secondary and .is-accent

Vertical range

Range inputs can be vertical. However, due to the current implementation, styles might not apply to the slider thumb element in webkit browsers. Note that orient="" attribute also leads to an issue when it comes to html validation.

Disabled range

Arange input can be disabled. Just add the attribute disabled="" with the value disabled.

Range output

Range inputs can have an output tooltip that is updated with the current input value. This is handled via javascript. Two classes are available for outputs : .has-output, wiche displays a static output element, and .has-output-tooltip, wich displays the outpus as a slider thum tooltip.

50

Custom range

A custom input range implementation based on Darlan Rod sass implementation.

50