Input

The .input element supports color and size modifiers.

Colors

<div class="field">
    <label for="default">Default</label>
    <input type="text" class="input" id="default" placeholder="Default">
</div>
<div class="field">
    <label for="primary">Primary</label>
    <input type="text" class="input is-primary" id="primary" placeholder="Primary">
</div>
<div class="field">
    <label for="accent">Accent</label>
    <input type="text" class="input is-accent" id="accent" placeholder="Accent">
</div>
<div class="field">
    <label for="accent-alt">Accent alt</label>
    <input type="text" class="input is-accent-alt" id="accent-alt" placeholder="Accent-alt">
</div>
<div class="field">
    <label for="success">Success</label>
    <input type="text" class="input is-success" id="success" placeholder="Success">
</div>
<div class="field">
    <label for="light-success">Light success</label>
    <input type="text" class="input is-light-success" id="light-success" placeholder="Light success">
</div>
<div class="field">
    <label for="warning">Warning</label>
    <input type="text" class="input is-warning" id="warning" placeholder="Warning">
</div>
<div class="field">
    <label for="light-warning">Light warning</label>
    <input type="text" class="input is-light-warning" id="light-warning" placeholder="Light warning">
</div>
<div class="field">
    <label for="danger">Danger</label>
    <input type="text" class="input is-danger" id="danger" placeholder="Danger">
</div>
<div class="field">
    <label for="light-danger">Light danger</label>
    <input type="text" class="input is-light-danger" id="light-danger" placeholder="Light danger">
</div>
<div class="field">
    <label for="info">Info</label>
    <input type="text" class="input is-info" id="info" placeholder="Info">
</div>

Sizes

There are two sizes, the default one and large.







 


<div class="field">
    <label for="default">Default</label>
    <input type="text" class="input" id="default" placeholder="Default">
</div>
<div class="field">
    <label for="large">Large</label>
    <input type="text" class="input is-large" id="large" placeholder="Large">
</div>

States



 


<div class="field">
    <label for="default">Disabled input</label>
    <input type="text" class="input" id="default" placeholder="Disabled input" disabled>
</div>

Help text

(Optional)


 



<div class="field">
    <label for="phone">Phone number</label>
    <span class="help">(Optional)</span>
    <input type="tel" class="input" id="phone" placeholder="Phone number">
</div>

Help texts have color modifiers too:

(Optional)
(Optional)

All good!

(Optional)

Something's wrong



 






 





 


<div class="field">
    <label for="phone">Phone number</label>
    <span class="help is-success">(Optional)</span>
    <input type="tel" class="input is-success" id="phone" placeholder="Phone number">
</div>
<div class="field">
    <label for="help_success">Some field</label>
    <span class="help">(Optional)</span>
    <input type="text" class="input is-success" id="help_success">
    <p class="help is-success">All good!</p>
</div>
<div class="field">
    <label for="help_danger">Some other field</label>
    <span class="help">(Optional)</span>
    <input type="text" class="input is-danger" id="help_danger">
    <p class="help is-danger">Something's wrong</p>
</div>
← Textarea →