Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

End Addon

Inputs can have addons if you need to shoow contextual information. You can attach an addon at the end of a field group. See markup for more details about usage.


            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input" type="text" placeholder="Gmail address">
                </div>
                <div class="control">
                    <a class="button is-static">
                        @gmail.com
                    </a>
                </div>
            </div>
            

Start Addon

Inputs can have addons if you need to shoow contextual information. You can attach an addon at the beginning of a field group. See markup for more details about usage.


            <div class="field has-addons">
                <div class="control">
                    <a class="button is-static">
                        +1
                    </a>
                </div>
                <div class="control is-expanded">
                    <input class="input" type="text" placeholder="Your phone number">
                </div>
            </div>
            

Addon Colors

Since input addons are button elements, usual modifier classes apply to them. You can use the is-primary, is-success, is-info, is-warning, is-danger.


            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input" type="text" placeholder="Find a repository">
                </div>
                <div class="control">
                    <a class="button is-primary">
                        Search
                    </a>
                </div>
            </div>
            

Rounded Addons

Inputs and their addons can have rounded edges as well. simply add the is-rounded class to the input and the button element to apply those styles. See markup for more details.


            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input is-rounded" type="text" placeholder="Find a repository">
                </div>
                <div class="control">
                    <a class="button is-primary is-rounded">
                        Search
                    </a>
                </div>
            </div>
            

Bi Directional

Inputs can have addons on both sides. You can even attach a select element to your form control group. Please refer to the code example for more details about usage.


            <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 is-success">
                        Send Payment
                    </a>
                </p>
            </div>