<div class="field">
<div class="control">
<input class="input is-primary-focus" type="text">
</div>
</div>Control the sizes of inputs by adding .is-small, .is-medium or .is-large to a text input.
Control colors when inputs are focused by adding .is-primary-focus, .is-secondary-focus or .is-accent-focus to a text input.
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.
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.
Change border color when inputs are focused by adding .is-primary, .is-secondary or .is-accent to the .control-material wrapper.
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.
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.
Change border colors when textareas are focused by adding .is-primary-focus, .is-secondary-focus or .is-accent-focus to a .textarea text area.
Add the class .is-grow to a .textarea element to expand it on focus.
<textarea class="textarea is-grow" rows="5" placeholder="Focus me, i can grow ..."></textarea>
You can have a button inside a textarea by adding the class is-button. Check out the code example for more details.
<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 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.
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.
You can create a basic select by wrapping an html select element with div that has the .select class.
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.
Basic selects have icon support for all sizes. See the markup structurefor more details.
Chosen is a jQuery library that helps you generating beautiful select boxes. You can find the plugin documentation on the github project repository.
Chosen supports option groups. Insert your options inside an <optgroup label=""></optgroup> tag to create structured options lists.
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 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.
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.
This is an example of a basic autocomplete getting data from an external json source. The plugin's documentation can be found here.
With one of the built in templates, you can easily display an additional description.
You can also create your own custom templates. This is an example showing a user search use case.
A lightweight and easy to implement datepicker. Supports options and multiple instances. Documentation can be found here.
A powerful and fancy datepicker with many features. Supports many options and custom theming. Documentation can be found here.
Another example demonstrating a 24 hours clock.
An original time picker library that focuses on user experience when setting time. Documentation can be found here.
A range input custom style that works in all major browsers.
Range inputs can have different sizes, add the .is-small, .is-medium or .is-large to change the input size.
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
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.
Arange input can be disabled. Just add the attribute disabled="" with the value disabled.
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.
A custom input range implementation based on Darlan Rod sass implementation.
