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
Make sure the input is the control's first child, otherwise the icon may disappear when selected. 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'
%}