<div class="field">
<div class="control">
<input class="input is-primary-focus" type="text">
</div>
</div>
mass media
All-in-one Marketing app
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 structure for more details.
A material design version of the select box. Don't forget to use the
same wrapper as the material inputs : .control-material.
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.
Easy to use and styled combo boxes that you can use out of the box to replace traditional selects. Combo boxes support icons and images.
Easy to use and styled combo boxes that you can use out of the box to replace traditional selects. Combo boxes support icons and images.
Ray Donovan
Ray Donovan
done
Helen Miller
done
Alan Maynard
done
Lakisha Williams
done
Sally Mitchels
done
Melany Smith
done
Easy to use and styled combo boxes that you can use out of the box to replace traditional selects. Combo boxes support icons and images.
Who will participate?
Jeff Stockton
done
Melany Smith
done
Helen Miller
done
Kareem Jabbar
done
Terry Daniels
done
Elie Brock
done
Nick Schwartz
done
Lakisha Williams
done
Alan Maynard
done
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.
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.
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
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.
