<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<div class="viva-form_select-search viva-form_select-custom"> <label class="viva-form_input-label" for="select-3">Select Search</label> <input type="text" class="viva-form_select-input" placeholder="Select an option" id="select-3" role="combobox" readonly /> <input type="hidden" class="viva-form_select-value" name="select-3" /> <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"> <input type="text" class="search-filter" tabindex="-1" placeholder="Search..."/> <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>
<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>
<div class="viva-form_select-search viva-form_select-multiple viva-form_select-custom"> <label class="viva-form_input-label" for="select-5">Select Options</label> <input type="text" class="viva-form_select-input" placeholder="Select options" id="select-5" role="combobox" aria-label="Select multiple options" readonly /> <input type="hidden" class="viva-form_select-value" name="select-5" /> <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"> <input type="text" class="search-filter" tabindex="-1" placeholder="Search..." /> <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>
Accepting new patients
Type A
2.5 miles
123 Main St
555-555-1234
Type B
5 miles
456 Broadway Ave
555-555-5678
Not accepting new patients
Type C
10 miles
789 Oak Street
555-555-9012