### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Input Addons

### 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.

@gmail.com

          <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.

+1

          <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`.

Search

          <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.

Search

          <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.

Send Payment

          <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>