Bulma supports the following native HTML form elements: <form><button><input><textarea> and <label>.
The following CSS classes are supported:
label
input
textarea
select
checkbox
radio
button
help
To maintain an evenly balanced design, Bulma provides a very useful control container with which you
can wrap the form controls.
When combining several controls in a form, use the field class as a
container, to keep the spacing consistent.
{% include docs/elements/anchor.html name="Complete form example" %}
{% include docs/elements/snippet.html content=example more=true %}
For the best results using Bulma, it's recommended to use the control element as often as possible.
{% include docs/elements/anchor.html name="Form field" %}
The field container is a simple container for:
a text label
a form control
an optional helptext
{% include docs/elements/snippet.html content=field_example %}
This container allows form fields to be spaced consistently.
{% include docs/elements/snippet.html content=fields_example %}
{% include docs/elements/anchor.html name="Form control" %}
The Bulma control is a versatile block container meant to
enhance single form controls. Because it has the same height as the element that it wraps, it can
only contain the following Bulma elements:
input
select
button
icon
This container gives the ability to:
keep the spacing consistent
combine form controls into a group
combine form controls into a list
append and prepend icons to a form control
{% include docs/elements/snippet.html content=control_input_example %}
{% include docs/elements/snippet.html content=control_select_example %}
{% include docs/elements/snippet.html content=control_button_example %}
{% include docs/elements/anchor.html name="With icons" %}
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 docs/elements/snippet.html content=icons_example clipped=true %}
You can append icons to select dropdowns as well.
{% include docs/elements/snippet.html content=select_icons_example %}
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 docs/elements/snippet.html content=has_icons_small_example %}
{% include docs/elements/snippet.html content=has_icons_normal_example clipped=true %}
{% include docs/elements/snippet.html content=has_icons_medium_example clipped=true %}
{% include docs/elements/snippet.html content=has_icons_large_example clipped=true %}
{% include docs/elements/anchor.html name="Form addons" %}
If you want to attach controls together, use the has-addons modifier on the
field container:
{% include docs/elements/snippet.html content=addons_example %}
You can attach inputs, buttons, and dropdowns only.
{% include docs/elements/snippet.html content=addons_static_example %}
Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the
input):
{% include docs/elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
If you want a full width select dropdown, pair control is-expanded with
select is-fullwidth.
{% include docs/elements/snippet.html content=addons_expanded_fullwidth_example %}
Use the has-addons-centered or the has-addons-right modifiers to alter the
alignment.
{% include docs/elements/snippet.html content=addons_center_example %}
{% include docs/elements/snippet.html content=addons_right_example %}
{% include docs/elements/anchor.html name="Form group" %}
If you want to group controls together, use the is-grouped modifier on the
field container.
{% include docs/elements/snippet.html content=group_example %}
Use the is-grouped-centered or the is-grouped-right modifiers to alter the
alignment.
{% include docs/elements/snippet.html content=group_centered_example %}
{% include docs/elements/snippet.html content=group_right_example %}
Add the is-expanded modifier on the control element you want to
fill up the remaining space with.
{% include docs/elements/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 docs/elements/snippet.html content=group_multiline_example clipped=true %}
List of buttons
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 docs/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 docs/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 docs/elements/snippet.html content=field_label_example horizontal=true more=true %}
{% capture custom_message %}
Form elements can be customized using the following generic variables. Simply set one or multiple of these variables before importing Bulma. Learn how.
{% endcapture %}
{% include docs/elements/anchor.html name="Disabled form" %}
You can disable part or a whole form by wrapping a set of controls in a fieldset with a
disabled HTML attribute.
{% include docs/elements/snippet.html content=disabled_fields_example %}
{%
include docs/components/variables.html
anchor_name='Control variables'
type='element'
variables_keys=page.variables_control_keys
custom_message=custom_message
folder='utilities'
file='controls'
%}
{%
include docs/components/variables.html
anchor_name='Form variables'
type='element'
variables_keys=page.variables_keys
folder='elements'
file='form'
hide_anchor=true
hide_content=true
%}