Inputs

Input Text

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="username">Username</label>
                  <span class="viva-form_input-icon" for="username">
                    <i class="fa fa-fw fa-user"></i></span>
                  <input type="text" name="username" placeholder="Username"/>
                </div>
              
            

Email

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-icon" for="email">
                    <i class="fa fa-fw fa-envelope"></i></span>
                  <input type="email" class="email" name="email" id="email" maxlength="100" placeholder="Email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(\.
                  [a-zA-Z0-9-]+)*\.[a-zA-Z]{2,}$" required />
                </div>
              
            

Input Password

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-icon" for="password">
                    <i class="fa fa-fw fa-lock"></i></label>
                  <input type="password" id="password" name="password" placeholder="Password"/>
                </div>
              
            

Input Number

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-icon" for="age-1">
                    <i class="fa fa-fw fa-user"></i></label>
                  <input type="number" id="age-1" name="age" placeholder="Age"/>
                </div>
              
            

Input Number No Spinner

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="age">Age</label>
                  <span class="viva-form_input-icon" for="age-2">
                    <i class="fa fa-fw fa-user"></i></span>
                  <input class="input-field no-spinner" type="number" name="age" id="age-2" placeholder="Age"/>
                </div>
              
            

Input Telephone

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-icon" for="phone">
                    <i class="fa fa-fw fa-phone"></i></span>
                  <input type="tel" class="phone" name="phone" id="phone" maxlength="14" placeholder="Phone Number"/>
                </div>
              
            

Input SSN

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-icon" for="ssn">
                    <i class="fa fa-fw fa-hashtag"></i></span>
                  <input type="text" class="ssn" name="ssn" id="ssn" maxlength="11" placeholder="SSN"/>
                </div>
              
            

Input TaxID

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="tax-id">Tax ID</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-hashtag"></i></span>
                  <input type="text" class="tax-id" id="tax-id" name="tax-id" maxlength="10" placeholder="Tax ID"/>
                </div>
              
            

Input MBI

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-icon" for="mbi">
                    <i class="fa fa-fw fa-hashtag"></i></span>
                  <input type="text" class="mbi" name="mbi" id="mbi" maxlength="13" placeholder="MBI"/>
                </div>
              
            

Input Zip Code

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="zip-code">Zip Code</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-hashtag"></i></span>
                  <div class="viva-form_flex">
                    <input type="text" class="zip-code" name="zip-code" id="zip-code" maxlength="10" placeholder="Zip Code"/>
                  </div>
                </div>
              
            

Input Zip Code Geolocation

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="zip-code-geolocation">Zip Code</label>
                  <span class="viva-form_input-icon" for="zip-code-geolocation">
                    <i class="fa fa-fw fa-hashtag"></i></span>
                  <div class="viva-form_flex">
                    <input type="text" class="zip-code-geolocation" name="zip-code-geolocation" id="zip-code-geolocation" maxlength="10" placeholder="Zip Code"/>
                    <button class="zip-geo-button" aria-label="Get current location">
                      <i class="fa fa-fw fa-map-marker"></i>
                    </button>
                  </div>
                </div>
              
            

Input File

HTML

              
                <div class="viva-form_input-file-container">
                  <input type="file" class="viva-form_input-file" name="file" id="file" />
                  <label for="file" class="viva-form_input-file-label">
                    <i class="fa fa-fw fa-upload viva-form_input-file-icon"></i>
                    <span class="viva-form_input-file-text">Choose a file</span>
                  </label>
                </div>
              
            

Input Text Only

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="text-only">Text Only</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-user"></i></span>
                  <input type="text" class="text-only" name="text-only" id="text-only" placeholder="Text Only"/>
                </div>
              
            

Text Only and Spaces

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="text-spaces-only">Text and Spaces Only</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-user"></i></span>
                  <input type="text" class="text-spaces-only" name="text-spaces-only" id="text-spaces-only" placeholder="Text and Spaces Only"/>
                </div>
              
            

Person Name

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="person-name">Person Name</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-user"></i></span>
                  <input type="text" class="person-name" name="person-name" id="person-name" placeholder="Person Name"/>
                </div>
              
            

Alphanumeric Only

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="alphanumeric-only">Alphanumeric Only</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-user"></i></span>
                  <input type="text" class="alphanumeric-only" name="alphanumeric-only" id="alphanumeric-only" placeholder="Alphanumeric Only"/>
                </div>
              
            

Alphanumeric and Spaces Only

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label"
                    for="alphanumeric-spaces-only">Alphanumeric and Spaces Only</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-user"></i>
                  </span>
                  <input type="text" class="alphanumeric-spaces-only" name="alphanumeric-spaces-only" id="alphanumeric-spaces-only" placeholder="Alphanumeric and Spaces Only"/>
                </div>
              
            

Date Pickers

Date Picker mm/dd/yyyy

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="date">Date</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-calendar"></i></span>
                  <input type="date" name="date" id="date"/>
                </div>
              
            

Date Picker mm/yyyy

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="date-month-year">Date</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-calendar"></i></span>
                  <input type="text" class="date-picker-mm-yyyy" name="date-month-year" id="date-month-year" maxlength="7" placeholder="mm/yyyy"/>
                </div>
              
            

Date Picker mm/dd

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="date-month-day">Date</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-calendar"></i></span>
                  <input type="text" class="date-picker-mm-dd" name="date-month-day" id="date-month-day" maxlength="5" placeholder="mm/dd"/>
                </div>
              
            

Textarea

Textarea

HTML

              
                <div class="viva-form_input-container">
                  <label class="viva-form_input-label" for="textarea">Textarea</label>
                  <span class="viva-form_input-icon">
                    <i class="fa fa-fw fa-comment"></i></span>
                  <textarea class="textarea" name="textarea" id="textarea" rows="4" placeholder="Textarea"></textarea>
                </div>
              
            

Radio

Radio

HTML

Select an option
              
                <fieldset class="viva-form_radio-container">
                  <legend>Select an option</legend>
                  <div class="viva-form_flex">
                    <label class="viva-form_form-control" for="option1">
                      <input type="radio" id="option1" name="options-1" />
                      Option 1
                    </label>
                    <label class="viva-form_form-control" for="option2">
                      <input type="radio" id="option2" name="options-1" />
                      Option 2
                    </label>
                  </div>
                </fieldset>
              
            
Select an option
              
                <fieldset class="viva-form_radio-container">
                  <legend>Select an option</legend>
                  <div class="viva-form_block">
                    <label class="viva-form_form-control" for="option3">
                      <input type="radio" id="option3" name="options-2" />
                      Option 3
                    </label>
                    <label class="viva-form_form-control" for="option4">
                      <input type="radio" id="option4" name="options-2" />
                      Option 4
                    </label>
                  </div>
                </fieldset>
              
            

Checkbox

Checkbox

HTML

              
                <div class="viva-form_checkbox-container">
                  <label class="viva-form_checkbox-label" for="checkbox">
                    <input type="checkbox" name="checkbox" />
                    <span>Agree to the terms</span>
                  </label>
                </div>
              
            

Disabled Checkbox

HTML

              
                <div class="viva-form_checkbox-container">
                  <label class="viva-form_checkbox-label" for="checkbox-disabled">
                    <input type="checkbox" name="checkbox-disabled" disabled
                    />
                    <span>Agree to the terms</span>
                  </label>
                </div>
              
            

Select

Select (Native)

HTML

              
                <div class="viva-form_select-wrapper">
                  <label for="select" class="viva-form_input-label">Select</label>
                  <select id="select">
                    <option value="" disabled selected>Select an option</option>
                    <option value="Option 1">Option 1</option>
                    <option value="Option 2">Option 2</option>
                    <option value="Option 3">Option 3</option>
                    <option value="Option 4">Option 4</option>
                  </select>
                  <i class="fa fa-fw fa-chevron-down select-chevron-icon"></i>
                </div>
              
            

Select (Custom)

HTML

                      
                        <div class="viva-form_select-custom">
                          <label class="viva-form_input-label" for="select-2">Select</label>
                          <input type="text" class="viva-form_select-input" placeholder="Select an option" id="select-2" role="combobox" readonly />
                          <input type="hidden" class="viva-form_select-value" name="select-2" />
                          <button class="select-chevron-icon" tabindex="-1">
                            <i class="fa fa-fw fa-chevron-down"></i>
                          </button>
                          <div class="select-options-container" role="list-box">
                            <ul class="select-options-list" role="presentation">
                              <li>
                                <a href="#" class="select-option" role="option" data-value="Option 1">Option 1</a>
                              </li>
                              <li>
                                <a href="#" class="select-option" role="option" data-value="Option 2">Option 2</a>
                              </li>
                              <li>
                                <a href="#" class="select-option" role="option" data-value="Option 3">Option 3</a>
                              </li>
                              <li>
                                <a href="#" class="select-option" role="option" data-value="Option 4">Option 4</a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      
                    

Select Search

HTML

Multiple Select

HTML

              
                <div class="viva-form_select-multiple viva-form_select-custom">
                  <label class="viva-form_input-label" for="select-4">Select Options</label>
                  <input type="text" class="viva-form_select-input" placeholder="Select options" id="select-4" role="combobox" aria-label="Select multiple options" readonly />
                  <input type="hidden" class="viva-form_select-value" name="select-4" />
                  <button class="select-chevron-icon" tabindex="-1">
                    <i class="fa fa-fw fa-chevron-down"></i>
                  </button>
                  <div class="select-options-container" role="list-box">
                    <ul class="select-options-list" role="presentation">
                      <li>
                        <a href="#" class="select-option" role="option" data-value="Option 1">Option 1</a>
                      </li>
                      <li>
                        <a href="#" class="select-option" role="option" data-value="Option 2">Option 2</a>
                      </li>
                      <li>
                        <a href="#" class="select-option" role="option" data-value="Option 3">Option 3</a>
                      </li>
                      <li>
                        <a href="#" class="select-option" role="option" data-value="Option 4">Option 4</a>
                      </li>
                    </ul>
                  </div>
                </div>
              
            

Multiple Select Search

HTML

Provider Search

Your provider search has returned 3 results

Provider A

Accepting new patients

Type A

2.5 miles

123 Main St

555-555-1234

Email a Copy

Networks

  • Huntsville Health Network
  • East Alabama Health Network Me
  • Baptist Medicare Me
  • UAB Hospital
  • Medical West
  • Open Panel
  • St Vincents Me
  • Infirmary Health Medicare

Provider B

Accepting new patients

Type B

5 miles

456 Broadway Ave

555-555-5678

Email a Copy

Networks

  • Valley Health Network
  • West Virginia Health Network
  • MedExpress Urgent Care
  • Mon Health Medical Center
  • Morgantown Medical Center
  • Open Panel
  • Wheeling Hospital
  • Camden Clark Medical Center

Provider C

Not accepting new patients

Type C

10 miles

789 Oak Street

555-555-9012

Email a Copy

Networks

  • Midwest Health Network
  • Central Health Network
  • Heartland Medical Center
  • St. John's Medical Center
  • Barnes-Jewish Hospital
  • Open Panel
  • Northwestern Medicine
  • University of Iowa Hospitals & Clinics

Contact Form

Are you a current Viva Medicare member?