bulma/docs/documentation/sass/form-control-mixins.html

---
title: Bulma Sass Form Control Mixins
layout: docs
theme: sass
doc-tab: sass
doc-subtab: form-control-mixins
breadcrumb:
  - home
  - documentation
  - sass
  - sass-form-control-mixins
---


<div class="content">
  <p>
    In Bulma, the <strong>form controls</strong> are an essential part of the framework. They comprise the following elements:
  </p>

  <ul>
    <li>
      <code>.button</code>
    </li>
    <li>
      <code>.input</code>
    </li>
    <li>
      <code>.select</code>
    </li>
    <li>
      <code>.file-cta</code>
      <code>.file-name</code>
    </li>
    <li>
      <code>.pagination-previous</code>
      <code>.pagination-next</code>
      <code>.pagination-link</code>
      <code>.pagination-ellipsis</code>
    </li>
  </ul>

  <p>
    The <code>control()</code> mixin ensures <strong>consistency</strong> by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
  </p>
</div>

{% highlight sass %}@use "bulma/sass/utilities/controls";

.bulma-control-mixin {
  @include controls.control;
  background: deeppink;
  color: white;
}{% endhighlight %}

{% capture control-mixin %}
<button class="bulma-control-mixin">
  My control
</button>
{% endcapture %}

{% include docs/elements/snippet.html content=control-mixin %}

{% include docs/elements/anchor.html name="Sizes" %}

<div class="content">
  <p>
    Controls have a default font size of <code>$size-normal</code> and also come in <strong>3 additional sizes</strong>, which can be accessed via 3 additional mixins:
  </p>

  <ul>
    <li>
      {% include docs/elements/snippet-inline.html content="@include controls.control-small;" %} with a font size <code>$size-small</code>
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="@include controls.control-medium;" %} with a font size <code>$size-medium</code>
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="@include controls.control-large;" %} with a font size <code>$size-large</code>
    </li>
  </ul>
</div>

{% highlight sass %}.bulma-control-mixin {
  &.is-small {
    @include controls.control-small;
  }

  &.is-medium {
    @include controls.control-medium;
  }

  &.is-large {
    @include controls.control-large;
  }
}{% endhighlight %}

{% capture control-mixin-sizes %}
<button class="bulma-control-mixin is-small">
  Small
</button>
<button class="bulma-control-mixin">
  Normal
</button>
<button class="bulma-control-mixin is-medium">
  Medium
</button>
<button class="bulma-control-mixin is-large">
  Large
</button>
{% endcapture %}

{% include docs/elements/snippet.html content=control-mixin-sizes %}

{% include docs/elements/anchor.html name="Control placeholder" %}

<div class="content">
  <p>
    The <code>control()</code> mixin also exists as <a href="https://sass-lang.com/documentation/at-rules/extend#placeholder-selectors" target="_blank">Sass placeholder</a> <code>%control</code>
  </p>
</div>

{% highlight sass %}@use "bulma/sass/utilities/extends";

.bulma-control-extend {
  @extend %control;
  background: mediumblue;
  color: white;
}{% endhighlight %}

{% capture control-extend %}
<button class="bulma-control-extend">
  My control
</button>
{% endcapture %}

{% include docs/elements/snippet.html content=control-extend %}