Select Box

Available simply by adding a class to the HTML select tag.

<select class="select">
    <option value="">Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Example

Please select a ward.
* Error text
<div class="form-group">
    <label for="test" class="form-label">
        Tokyo 23 Wards
        <span class="form-necessity">* Required</span>
    </label>
    <div class="form-support">Please select a ward.</div>
    <select id="test" class="select">
        <option value="">Please select</option>
        <option value="1">Adachi</option>
        <option value="2">Arakawa</option>
        <option value="3">Itabashi</option>
        <option value="4">Edogawa</option>
    </select>
    <div class="form-error">* Error text</div>
</div>

Sizes

  • sm
  • md (Default)
  • lg
<select class="select is-sm">
    <option value="">Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<select class="select is-md">
    <option value="">Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<select class="select is-lg">
    <option value="">Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

HTML Attributes

Disabled

Adding the disabled attribute will gray out the input.

<select class="select" disabled>
    <option value="">Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Validation and Feedback

Feedback design after validating user input.

Error

Simply add the is-error class.

<select class="select is-error">
    <option value="">Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Using form-group allows you to display error text at the same time.

Please select a ward.
* Error text
<div class="form-group">
    <label for="test" class="form-label">
        Tokyo 23 Wards
        <span class="form-necessity">* Required</span>
    </label>
    <div class="form-support">Please select a ward.</div>
    <select id="test" class="select is-error">
        <option value="">Please select</option>
        <option value="1">Adachi</option>
        <option value="2">Arakawa</option>
        <option value="3">Itabashi</option>
        <option value="4">Edogawa</option>
    </select>
    <div class="form-error">* Error text</div>
</div>