-
Form controls
-
- All generic form controls, designed for consistency
-
+{% include elements/snippet.html content=example more=true %}
-
+{% include elements/anchor.html name="Form field" %}
-
-
The following form controls classes are supported:
-
- .label.input.textarea.select.checkbox.radio.button.help
-
Each of them should be wrapped in a .control container.
- When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
-
+
+
The field container is a simple container for:
+
+ - a text
label
+ - a form
control
+ - an optional
helptext
+
+
- {% include snippet.html content=example more=true %}
+{% include elements/snippet.html content=field_example %}
- {% include anchor.html name="Form field" %}
+
+
This container allows form fields to be spaced consistently.
+
-
-
The field container is a simple container for:
-
- - a text
label
- - a form
control
- - an optional
helptext
-
-
+{% include elements/snippet.html content=fields_example %}
- {% include snippet.html content=field_example %}
+{% include elements/anchor.html name="Form control" %}
-
-
This container allows form fields to be spaced consistently.
-
+
+
The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:
+
+ inputselectbuttonicon
+
- {% include snippet.html content=fields_example %}
+{% include elements/snippet.html content=control_input_example %}
- {% include anchor.html name="Form control" %}
+{% include elements/snippet.html content=control_select_example %}
-
-
The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:
-
- inputselectbuttonicon
-
+{% include elements/snippet.html content=control_button_example %}
- {% include snippet.html content=control_input_example %}
+
+{% include elements/anchor.html name="With icons" %}
- {% include snippet.html content=control_select_example %}
+
+
You can append one of 2 modifiers on a control:
+
+ -
+
has-icons-left
+
+ -
+ and/or
has-icons-right
+
+
+
You also need to add a modifier on the icon:
+
+ -
+
icon is-left if has-icons-left is used
+
+ -
+
icon is-right if has-icons-right is used
+
+
+
The size of the input will define the size of the icon container.
+
- {% include snippet.html content=control_button_example %}
+{% include elements/snippet.html content=icons_example clipped=true %}
-
- {% include anchor.html name="With icons" %}
+
+
+ You can append icons to select dropdowns as well.
+
+
-
-
You can append one of 2 modifiers on a control:
-
- -
-
has-icons-left
-
- -
- and/or
has-icons-right
-
-
-
You also need to add a modifier on the icon:
-
- -
-
icon is-left if has-icons-left is used
-
- -
-
icon is-right if has-icons-right is used
-
-
-
The size of the input will define the size of the icon container.
-
+{% include elements/snippet.html content=select_icons_example %}
- {% include snippet.html content=icons_example clipped=true %}
+
+
+ If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.
+
+
-
-
- You can append icons to select dropdowns as well.
-
-
+{% include elements/snippet.html content=has_icons_small_example %}
- {% include snippet.html content=select_icons_example %}
+{% include elements/snippet.html content=has_icons_normal_example clipped=true %}
-
-
- If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.
-
-
+{% include elements/snippet.html content=has_icons_medium_example clipped=true %}
- {% include snippet.html content=has_icons_small_example %}
+{% include elements/snippet.html content=has_icons_large_example clipped=true %}
- {% include snippet.html content=has_icons_normal_example clipped=true %}
+{% include elements/anchor.html name="Form addons" %}
- {% include snippet.html content=has_icons_medium_example clipped=true %}
+
+
If you want to attach controls together, use the has-addons modifier on the field container:
+
- {% include snippet.html content=has_icons_large_example clipped=true %}
+{% include elements/snippet.html content=addons_example %}
- {% include anchor.html name="Form addons" %}
+
+
You can attach inputs, buttons, and dropdowns only.
+
-
-
If you want to attach controls together, use the has-addons modifier on the field container:
-
+
+
It can be useful to append a static button.
+
- {% include snippet.html content=addons_example %}
+{% include elements/snippet.html content=addons_static_example %}
-
-
You can attach inputs, buttons, and dropdowns only.
-
+
+
Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):
+
-
-
It can be useful to append a static button.
-
+{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
- {% include snippet.html content=addons_static_example %}
+
+
If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.
+
-
-
Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):
-
+{% include elements/snippet.html content=addons_expanded_fullwidth_example %}
- {% include snippet.html content=addons_expanded_example horizontal=true more=true %}
+
+
Use the has-addons-centered or the has-addons-right modifiers to alter the alignment.
+
-
-
If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.
-
+{% include elements/snippet.html content=addons_center_example %}
- {% include snippet.html content=addons_expanded_fullwidth_example %}
+{% include elements/snippet.html content=addons_right_example %}
-
-
Use the has-addons-centered or the has-addons-right modifiers to alter the alignment.
-
+{% include elements/anchor.html name="Form group" %}
- {% include snippet.html content=addons_center_example %}
+
+
+ If you want to group controls together, use the is-grouped modifier on the field container.
+
+
- {% include snippet.html content=addons_right_example %}
+{% include elements/snippet.html content=group_example %}
- {% include anchor.html name="Form group" %}
+
+ Use the is-grouped-centered or the is-grouped-right modifiers to alter the alignment.
+
+
-
-
- If you want to group controls together, use the is-grouped modifier on the field container.
-
-
+{% include elements/snippet.html content=group_centered_example %}
- {% include snippet.html content=group_example %}
+{% include elements/snippet.html content=group_right_example %}
-
- Use the is-grouped-centered or the is-grouped-right modifiers to alter the alignment.
-
-
+
+
+ Add the is-expanded modifier on the control element you want to fill up the remaining space with.
+
+
- {% include snippet.html content=group_centered_example %}
+{% include elements/snippet.html content=group_expanded_example %}
- {% include snippet.html content=group_right_example %}
+
+
+ Add the is-grouped-multiline modifier to allow controls to fill up multiple lines. This is ideal for a long list of controls.
+
+
-
-
- Add the is-expanded modifier on the control element you want to fill up the remaining space with.
-
-
-
- {% include snippet.html content=group_expanded_example %}
-
-
-
- Add the is-grouped-multiline modifier to allow controls to fill up multiple lines. This is ideal for a long list of controls.
-
-
-
- {% include snippet.html content=group_multiline_example clipped=true %}
-
-
-
-
-
-
- If you only need a list of buttons, try out the new buttons class with which you can create a multiline list of buttons.
-
-
-
-
-
- {% include anchor.html name="Horizontal form" %}
-
-
-
If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:
-
- -
-
field-label for the side label
-
- -
-
field-body for the input/select/textarea container
-
-
-
You can use is-grouped or has-addons for the child elements.
-
-
- {% include snippet.html content=horizontal_form_example horizontal=true more=true %}
-
-
-
- To preserve the vertical alignment of labels with each type and size of control, the .field-label comes with 4 size modifiers:
-
-
- -
-
.is-small
-
- -
-
.is-normal for any .input or .button
-
- -
-
.is-medium
-
- -
-
.is-large
-
-
-
-
- {% include snippet.html content=field_label_example horizontal=true more=true %}
-
- {% include anchor.html name="Variables" %}
-
-
-
- Form elements can be customized using the following generic variables. Simply set one or multiple of these variables before importing Bulma. Learn how.
-
-
-
-
-
-
- | Name |
- Default value |
-
-
-
-
- | Name |
- Default value |
-
-
-
- {% for key in page.variables_controls_keys %}
- {% assign variable = site.data.variables.utilities.controls.vars[key] %}
-
-
- {{ variable.name }}
- |
-
- {{ variable.value }}
- |
-
- {% endfor %}
- {% for key in page.variables_form_keys %}
- {% assign variable = site.data.variables.elements.form.vars[key] %}
-
-
- {{ variable.name }}
- |
-
- {{ variable.value }}
- |
-
- {% endfor %}
-
-
+{% include elements/snippet.html content=group_multiline_example clipped=true %}
+
+
-
+
+
+
+ If you only need a list of buttons, try out the new buttons class with which you can create a multiline list of buttons.
+
+
+
+
+
+{% include elements/anchor.html name="Horizontal form" %}
+
+
+
If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:
+
+ -
+
field-label for the side label
+
+ -
+
field-body for the input/select/textarea container
+
+
+
You can use is-grouped or has-addons for the child elements.
+
+
+{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
+
+
+
+ To preserve the vertical alignment of labels with each type and size of control, the .field-label comes with 4 size modifiers:
+
+
+ -
+
.is-small
+
+ -
+
.is-normal for any .input or .button
+
+ -
+
.is-medium
+
+ -
+
.is-large
+
+
+
+
+{% include elements/snippet.html content=field_label_example horizontal=true more=true %}
+
+{% include elements/anchor.html name="Variables" %}
+
+
+
+ Form elements can be customized using the following generic variables. Simply set one or multiple of these variables before importing Bulma. Learn how.
+
+
+
+
+
+
+ | Name |
+ Default value |
+
+
+
+
+ | Name |
+ Default value |
+
+
+
+ {% for key in page.variables_controls_keys %}
+ {% assign variable = site.data.variables.utilities.controls.vars[key] %}
+
+
+ {{ variable.name }}
+ |
+
+ {{ variable.value }}
+ |
+
+ {% endfor %}
+ {% for key in page.variables_form_keys %}
+ {% assign variable = site.data.variables.elements.form.vars[key] %}
+
+
+ {{ variable.name }}
+ |
+
+ {{ variable.value }}
+ |
+
+ {% endfor %}
+
+
diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
index d8c0c5ac..d32fcc95 100644
--- a/docs/documentation/form/input.html
+++ b/docs/documentation/form/input.html
@@ -3,6 +3,11 @@ title: Input
layout: documentation
doc-tab: form
doc-subtab: input
+breadcrumb:
+- home
+- documentation
+- form
+- form-input
variables_keys:
- input-color
- input-background-color
@@ -21,6 +26,10 @@ variables_keys:
- input-icon-color
- input-icon-active-color
- input-radius
+meta:
+ colors: true
+ sizes: true
+ variables: true
---
{% capture input_example %}
@@ -239,288 +248,268 @@ variables_keys:
+ 
+ 
+ 
+ 
- 
+ 
+ 
+ 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
