2017-07-17 14:05:39 +00:00
---
2017-07-29 12:02:00 +00:00
title: Form controls
2017-07-17 14:05:39 +00:00
layout: documentation
doc-tab: form
doc-subtab: general
---
{% capture example %}
< div class = "field" >
< label class = "label" > Name< / label >
2017-07-17 14:51:22 +00:00
< div class = "control" >
2017-07-17 14:05:39 +00:00
< input class = "input" type = "text" placeholder = "Text input" >
2017-07-17 14:51:22 +00:00
< / div >
2017-07-17 14:05:39 +00:00
< / div >
< div class = "field" >
< label class = "label" > Username< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-success" type = "text" placeholder = "Text input" value = "bulma" >
< span class = "icon is-small is-left" >
< i class = "fa fa-user" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< p class = "help is-success" > This username is available< / p >
< / div >
< div class = "field" >
< label class = "label" > Email< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-danger" type = "text" placeholder = "Email input" value = "hello@" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-warning" > < / i >
< / span >
< / div >
< p class = "help is-danger" > This email is invalid< / p >
< / div >
< div class = "field" >
< label class = "label" > Subject< / label >
< div class = "control" >
2017-07-17 18:17:57 +00:00
< div class = "select" >
2017-07-17 14:05:39 +00:00
< select >
< option > Select dropdown< / option >
< option > With options< / option >
< / select >
2017-07-17 18:17:57 +00:00
< / div >
2017-07-17 14:05:39 +00:00
< / div >
< / div >
< div class = "field" >
< label class = "label" > Message< / label >
< div class = "control" >
< textarea class = "textarea" placeholder = "Textarea" > < / textarea >
< / div >
< / div >
< div class = "field" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
I agree to the < a href = "#" > terms and conditions< / a >
< / label >
< / div >
< / div >
< div class = "field" >
< div class = "control" >
< label class = "radio" >
< input type = "radio" name = "question" >
Yes
< / label >
< label class = "radio" >
< input type = "radio" name = "question" >
No
< / label >
< / div >
< / div >
< div class = "field is-grouped" >
< div class = "control" >
< button class = "button is-primary" > Submit< / button >
< / div >
< div class = "control" >
< button class = "button is-link" > Cancel< / button >
< / div >
< / div >
{% endcapture %}
{% capture field_example %}
< div class = "field" >
< label class = "label" > Label< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Text input" >
< / div >
< p class = "help" > This is a help text< / p >
< / div >
{% endcapture %}
{% capture fields_example %}
< div class = "field" >
< label class = "label" > Name< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "e.g Alex Smith" >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Email< / label >
< div class = "control" >
< input class = "input" type = "email" placeholder = "e.g. alexsmith@gmail.com" >
< / div >
< / div >
{% endcapture %}
{% capture control_input_example %}
< div class = "control" >
< input class = "input" type = "text" placeholder = "Text input" >
< / div >
{% endcapture %}
{% capture control_select_example %}
< div class = "control" >
< div class = "select" >
< select >
< option > Select dropdown< / option >
< option > With options< / option >
< / select >
< / div >
< / div >
{% endcapture %}
{% capture control_button_example %}
< div class = "control" >
< button class = "button is-primary" > Submit< / button >
< / div >
{% endcapture %}
2017-07-17 14:51:22 +00:00
{% capture icons_example %}
< div class = "field" >
< p class = "control has-icons-left has-icons-right" >
< input class = "input" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / p >
< / div >
< div class = "field" >
< p class = "control has-icons-left" >
< input class = "input" type = "password" placeholder = "Password" >
< span class = "icon is-small is-left" >
< i class = "fa fa-lock" > < / i >
< / span >
< / p >
< / div >
< div class = "field" >
< p class = "control" >
< button class = "button is-success" >
Login
< / button >
< / p >
< / div >
{% endcapture %}
{% capture select_icons_example %}
< div class = "field" >
< p class = "control has-icons-left" >
< span class = "select" >
< select >
< option selected > Country< / option >
< option > Select dropdown< / option >
< option > With options< / option >
< / select >
< / span >
< span class = "icon is-small is-left" >
< i class = "fa fa-globe" > < / i >
< / span >
< / p >
< / div >
{% endcapture %}
{% capture has_icons_small_example %}
< div class = "field" >
< label class = "label is-small" > Small input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-small" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
{% endcapture %}
{% capture has_icons_normal_example %}
< div class = "field" >
< label class = "label" > Normal input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input" type = "email" placeholder = "Email" >
< span class = "icon is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
{% endcapture %}
{% capture has_icons_medium_example %}
< div class = "field" >
< label class = "label is-medium" > Medium input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-medium" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-medium" type = "email" placeholder = "Email" >
< span class = "icon is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-medium" type = "email" placeholder = "Email" >
< span class = "icon is-medium is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-medium is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
{% endcapture %}
{% capture has_icons_large_example %}
< div class = "field" >
< label class = "label is-large" > Large input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-medium is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-medium is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-large is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-large is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
{% endcapture %}
2017-07-17 14:05:39 +00:00
{% capture addons_example %}
< div class = "field has-addons" >
2017-07-17 14:51:22 +00:00
< div class = "control" >
2017-07-17 14:05:39 +00:00
< input class = "input" type = "text" placeholder = "Find a repository" >
2017-07-17 14:51:22 +00:00
< / div >
< div class = "control" >
2017-07-17 14:05:39 +00:00
< a class = "button is-info" >
Search
< / a >
2017-07-17 14:51:22 +00:00
< / div >
2017-07-17 14:05:39 +00:00
< / div >
{% endcapture %}
{% capture addons_static_example %}
< div class = "field has-addons" >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Your email" >
< / p >
< p class = "control" >
< a class = "button is-static" >
@gmail.com
< / a >
< / p >
< / div >
{% endcapture %}
{% capture addons_expanded_example %}
< div class = "field has-addons" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button" >
Transfer
< / a >
< / p >
< / div >
< div class = "field has-addons" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control is-expanded" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button" >
Transfer
< / a >
< / p >
< / div >
{% endcapture %}
{% capture addons_expanded_fullwidth_example %}
< div class = "field has-addons" >
2017-07-17 14:51:22 +00:00
< div class = "control is-expanded" >
< div class = "select is-fullwidth" >
2017-07-17 14:05:39 +00:00
< select name = "country" >
< option value = "Argentina" > Argentina< / option >
< option value = "Bolivia" > Bolivia< / option >
< option value = "Brazil" > Brazil< / option >
< option value = "Chile" > Chile< / option >
< option value = "Colombia" > Colombia< / option >
< option value = "Ecuador" > Ecuador< / option >
< option value = "Guyana" > Guyana< / option >
< option value = "Paraguay" > Paraguay< / option >
< option value = "Peru" > Peru< / option >
< option value = "Suriname" > Suriname< / option >
< option value = "Uruguay" > Uruguay< / option >
< option value = "Venezuela" > Venezuela< / option >
< / select >
2017-07-17 14:51:22 +00:00
< / div >
< / div >
< div class = "control" >
2017-07-17 14:05:39 +00:00
< button type = "submit" class = "button is-primary" > Choose< / button >
2017-07-17 14:51:22 +00:00
< / div >
2017-07-17 14:05:39 +00:00
< / div >
{% endcapture %}
{% capture addons_center_example %}
< div class = "field has-addons has-addons-centered" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button is-primary" >
Transfer
< / a >
< / p >
< / div >
{% endcapture %}
{% capture addons_right_example %}
< div class = "field has-addons has-addons-right" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button is-primary" >
Transfer
< / a >
< / p >
< / div >
{% endcapture %}
{% capture group_example %}
2017-07-24 18:45:21 +00:00
< div class = "field is-grouped" >
< p class = "control" >
< a class = "button is-primary" >
Submit
< / a >
< / p >
< p class = "control" >
< a class = "button is-light" >
Cancel
< / a >
< / p >
< / div >
{% endcapture %}
{% capture group_centered_example %}
< div class = "field is-grouped is-grouped-centered" >
< p class = "control" >
< a class = "button is-primary" >
Submit
< / a >
< / p >
< p class = "control" >
< a class = "button is-light" >
Cancel
< / a >
< / p >
< / div >
{% endcapture %}
{% capture group_right_example %}
< div class = "field is-grouped is-grouped-right" >
< p class = "control" >
< a class = "button is-primary" >
Submit
< / a >
< / p >
< p class = "control" >
< a class = "button is-light" >
Cancel
< / a >
< / p >
< / div >
{% endcapture %}
{% capture group_expanded_example %}
2017-07-17 14:05:39 +00:00
< div class = "field is-grouped" >
< p class = "control is-expanded" >
< input class = "input" type = "text" placeholder = "Find a repository" >
< / p >
< p class = "control" >
< a class = "button is-info" >
Search
< / a >
< / p >
< / div >
{% endcapture %}
2017-07-24 18:45:21 +00:00
{% capture group_multiline_example %}
< div class = "field is-grouped is-grouped-multiline" >
< p class = "control" >
< a class = "button" >
One
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Two
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Three
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Four
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Five
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Size
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Seven
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Eight
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Nine
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Ten
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Eleven
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Twelve
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Thirteen
< / a >
< / p >
< / div >
{% endcapture %}
2017-07-17 14:05:39 +00:00
{% capture horizontal_form_example %}
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > From< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< p class = "control is-expanded has-icons-left" >
< input class = "input" type = "text" placeholder = "Name" >
< span class = "icon is-small is-left" >
< i class = "fa fa-user" > < / i >
< / span >
< / p >
< / div >
< div class = "field" >
< p class = "control is-expanded has-icons-left has-icons-right" >
< input class = "input is-success" type = "email" placeholder = "Email" value = "alex@smith.com" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / p >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label" > < / div >
< div class = "field-body" >
< div class = "field is-expanded" >
< div class = "field has-addons" >
< p class = "control" >
< a class = "button is-static" >
+44
< / a >
< / p >
< p class = "control is-expanded" >
< input class = "input" type = "tel" placeholder = "Your phone number" >
< / p >
< / div >
< p class = "help" > Do not enter the first zero< / p >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Department< / label >
< / div >
< div class = "field-body" >
< div class = "field is-narrow" >
< div class = "control" >
< div class = "select is-fullwidth" >
< select >
< option > Business development< / option >
< option > Marketing< / option >
< option > Sales< / option >
< / select >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label" >
< label class = "label" > Already a member?< / label >
< / div >
< div class = "field-body" >
< div class = "field is-narrow" >
< div class = "control" >
< label class = "radio" >
< input type = "radio" name = "member" >
Yes
< / label >
< label class = "radio" >
< input type = "radio" name = "member" >
No
< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Subject< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-danger" type = "text" placeholder = "e.g. Partnership opportunity" >
< / div >
< p class = "help is-danger" >
This field is required
< / p >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Question< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< textarea class = "textarea" placeholder = "Explain how we can help you" > < / textarea >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label" >
<!-- Left empty for spacing -->
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< button class = "button is-primary" >
Send message
< / button >
< / div >
< / div >
< / div >
< / div >
{% endcapture %}
{% capture field_label_example %}
< div class = "field is-horizontal" >
< div class = "field-label" >
< label class = "label" > No padding< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
Checkbox
< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-small" >
< label class = "label" > Small padding< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-small" type = "text" placeholder = "Small sized input" >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Normal label< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Normal sized input" >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-medium" >
< label class = "label" > Medium label< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-medium" type = "text" placeholder = "Medium sized input" >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-large" >
< label class = "label" > Large label< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-large" type = "text" placeholder = "Large sized input" >
< / div >
< / div >
< / div >
< / div >
{% endcapture %}
{% include subnav-form.html %}
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Form controls< / h1 >
< h2 class = "subtitle" >
All generic < strong > form controls< / strong > , designed for consistency
< / h2 >
< hr >
< div class = "content" >
< p > The following form controls < strong > classes< / strong > are supported:< / p >
< ul >
< li > < code > .label< / code > < / li >
< li > < code > .input< / code > < / li >
< li > < code > .textarea< / code > < / li >
< li > < code > .select< / code > < / li >
< li > < code > .checkbox< / code > < / li >
< li > < code > .radio< / code > < / li >
< li > < code > .button< / code > < / li >
< li > < code > .help< / code > < / li >
< / ul >
< p > Each of them should be wrapped in a < code > .control< / code > container.< br >
When combining several controls in a < strong > form< / strong > , use the < code > .field< / code > class as a < strong > container< / strong > , to keep the spacing consistent.< / p >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{example}}{% endhighlight %}
< / div >
< / div >
< hr >
2017-07-17 18:46:18 +00:00
< h3 id = "form-field" class = "title" > Form field< / h3 >
2017-07-17 14:05:39 +00:00
< div class = "content" >
< p > The < code > field< / code > container is a simple container for:< / p >
< ul >
< li > a text < code > label< / code > < / li >
< li > a form < code > control< / code > < / li >
< li > an optional < code > help< / code > text< / li >
< / ul >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{field_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{field_example}}{% endhighlight %}
< / div >
< / div >
< div class = "content" >
< p > This container allows form fields to be < strong > spaced consistently< / strong > .< / p >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{fields_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{fields_example}}{% endhighlight %}
< / div >
< / div >
< hr >
< h3 id = "form-control" class = "title" > Form control< / h3 >
< div class = "content" >
2017-07-17 14:51:22 +00:00
< p > The < code > control< / code > is a versatile container meant to < strong > enhance single form controls< / strong > . Because it has the same height as a control elements, it can < strong class = "has-text-danger" > only contain< / strong > the following elements:< / p >
2017-07-17 14:05:39 +00:00
< ul >
< li > < code > input< / code > < / li >
< li > < code > select< / code > < / li >
< li > < code > button< / code > < / li >
< li > < code > icon< / code > < / li >
< / ul >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{control_input_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{control_input_example}}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{control_select_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{control_select_example}}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{control_button_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{control_button_example}}{% endhighlight %}
< / div >
< / div >
2017-07-17 14:51:22 +00:00
<!-- Font Awesome Icons -->
< hr >
< h3 class = "title" > With icons< / h3 >
< div class = "content" >
< p > You can append one of 2 < strong > modifiers< / strong > on a control:< / p >
< ul >
< li >
< code > has-icons-left< / code >
< / li >
< li >
and/or < code > has-icons-right< / code >
< / li >
< / ul >
< p > You also need to add a modifier on the < strong > icon< / strong > :< / p >
< ul >
< li >
< code > icon is-left< / code > if < code > has-icons-left< / code > is used
< / li >
< li >
< code > icon is-right< / code > if < code > has-icons-right< / code > is used
< / li >
< / ul >
< p > The size of the < strong > input< / strong > will define the size of the icon container.< / p >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{icons_example}}
< / div >
< div class = "column is-half highlight-full" >
{% highlight html %}{{icons_example}}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "content" >
< p >
You can append icons to < strong > select dropdowns< / strong > as well.
< / p >
< / div >
{{select_icons_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{select_icons_example}}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "content" >
< p >
If the control contains an icon, Bulma will make sure the icon remains < strong > centered< / strong > , no matter the size of the input < em > or< / em > of the icon.
< / p >
< / div >
{{has_icons_small_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{has_icons_small_example}}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{has_icons_normal_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{has_icons_normal_example}}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{has_icons_medium_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{has_icons_medium_example}}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
{{has_icons_large_example}}
< / div >
< div class = "column is-half" >
{% highlight html %}{{has_icons_large_example}}{% endhighlight %}
< / div >
< / div >
2017-07-17 14:05:39 +00:00
< hr >
< h3 id = "form-addons" class = "title" > Form addons< / h3 >
< div class = "content" >
< p > If you want to < strong > attach controls< / strong > together, use the < code > has-addons< / code > modifier on the < code > field< / code > container:< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:05:39 +00:00
{{addons_example}}
< / div >
{% highlight html %}{{addons_example}}{% endhighlight %}
< div class = "content" >
< p > You can attach inputs, buttons, and dropdowns < strong > only< / strong > .< / p >
< / div >
< div class = "content" >
< p >
< span class = "tag is-success" > New!< / span >
< span class = "tag is-info" > 0.4.2< / span >
< / p >
< p > It can be useful to append a < a href = "{{site.url}}/documentation/elements/button#static-button" > static button< / a > .< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:51:22 +00:00
{{addons_static_example}}
2017-07-17 14:05:39 +00:00
< / div >
2017-07-17 14:51:22 +00:00
{% highlight html %}{{addons_static_example}}{% endhighlight %}
2017-07-17 14:05:39 +00:00
< div class = "content" >
< p > Use the < code > is-expanded< / code > modifier on the element you want to fill up the remaining space (in this case, the input):< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:51:22 +00:00
{{addons_expanded_example}}
2017-07-17 14:05:39 +00:00
< / div >
2017-07-17 14:51:22 +00:00
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
2017-07-17 14:05:39 +00:00
< div class = "content" >
< p > If you want a full width select dropdown, pair < code > control is-expanded< / code > with < code > select is-fullwidth< / code > .< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:05:39 +00:00
{{addons_expanded_fullwidth_example}}
< / div >
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
< div class = "content" >
< p > Use the < code > has-addons-centered< / code > or the < code > has-addons-right< / code > modifers to alter the < strong > alignment< / strong > .< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:05:39 +00:00
{{addons_center_example}}
< / div >
{% highlight html %}{{addons_center_example}}{% endhighlight %}
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:05:39 +00:00
{{addons_right_example}}
< / div >
{% highlight html %}{{addons_right_example}}{% endhighlight %}
< hr >
< h3 class = "title" > Form group< / h3 >
< div class = "content" >
< p >
If you want to < strong > group< / strong > controls together, use the < code > is-grouped< / code > modifier on the < code > field< / code > container.
2017-07-24 18:45:21 +00:00
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-24 18:45:21 +00:00
{{group_example}}
< / div >
{% highlight html %}{{group_example}}{% endhighlight %}
< div class = "content" >
2017-07-17 14:05:39 +00:00
Use the < code > is-grouped-centered< / code > or the < code > is-grouped-right< / code > modifers to alter the < strong > alignment< / strong > .
< / p >
2017-07-24 18:45:21 +00:00
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-24 18:45:21 +00:00
{{group_centered_example}}
< / div >
{% highlight html %}{{group_centered_example}}{% endhighlight %}
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-24 18:45:21 +00:00
{{group_right_example}}
< / div >
{% highlight html %}{{group_right_example}}{% endhighlight %}
< div class = "content" >
2017-07-17 14:05:39 +00:00
< p >
Add the < code > is-expanded< / code > modifier on the control element you want to < strong > fill up the remaining space< / strong > with.
< / p >
< / div >
2017-07-24 18:45:21 +00:00
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-24 18:45:21 +00:00
{{group_expanded_example}}
< / div >
{% highlight html %}{{group_expanded_example}}{% endhighlight %}
< div id = "form-group-multiline" class = "content" >
< p >
< span class = "tag is-success" > New!< / span >
< span class = "tag is-info" > 0.4.4< / span >
< / p >
< p >
Add the < code > is-grouped-multiline< / code > modifier to allow controls to fill up < strong > multiple lines< / strong > . This is ideal for a long list of controls.
< / p >
< / div >
< div class = "columns" >
< div class = "column is-half" >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-24 18:45:21 +00:00
{{group_multiline_example}}
< / div >
< / div >
< div class = "column is-half" >
{% highlight html %}{{group_multiline_example}}{% endhighlight %}
< / div >
2017-07-17 14:05:39 +00:00
< / div >
< hr >
< h3 class = "title" > Horizontal form< / h3 >
< div class = "content" >
< p > If you want a < strong > horizontal< / strong > form control, use the < code > is-horizontal< / code > modifier on the < code > field< / code > container, in which you include:< / p >
< ul >
< li >
< code > field-label< / code > for the side label
< / li >
< li >
< code > field-body< / code > for the input/select/textarea container
< / li >
< / ul >
< p > You can use < code > is-grouped< / code > or < code > has-addons< / code > for the child elements.< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:05:39 +00:00
{{horizontal_form_example}}
< / div >
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
< div class = "content" >
< p >
To preserve the < strong > vertical alignment< / strong > of labels with each type and size of control, the < code > .field-label< / code > comes with < strong > 4 size modifiers< / strong > :
< / p >
< ul >
< li >
< code > .is-small< / code >
< / li >
< li >
< code > .is-normal< / code > for any < code > .input< / code > or < code > .button< / code >
< / li >
< li >
< code > .is-medium< / code >
< / li >
< li >
< code > .is-large< / code >
< / li >
< / ul >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-17 14:05:39 +00:00
{{field_label_example}}
< / div >
{% highlight html %}{{field_label_example}}{% endhighlight %}
< / div >
< / section >
