<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 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
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.