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.
You can have a button inside a textarea by adding the class
is-button
. Check out the code example for more details.
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.
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.
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.