Default

It displays the State as a list-item when country that is having States is selected, it displays the State as a textbox when country without States is selected.

Note: the select-or-text-input component supports the web's "tabindex" behavior -- use the tab-index parameter as though it was the tabindex HTML attribute directly; DO NOT use the tabindex HTML attribute on the element directly, as it will result in undesired behavior (due to how "tabindex" behavior works; all elements support the tabindex HTML attribute)

Item Value

HTML

<span><i><strong>Note:</strong> the <code>select-or-text-input</code> component supports the web's "tabindex" behavior -- use the <code>tab-index</code> parameter as though it was the <code>tabindex</code> HTML attribute directly; <strong>DO NOT</strong> use the <code>tabindex</code> HTML attribute on the element directly, as it will result in undesired behavior (due to how "tabindex" behavior works; all elements support the <code>tabindex</code> HTML attribute)</span> <hr />  <div class="t-content" ng-controller="selectOrTextInputExampleController as selectOrTextInputExampleController"> <button ng-click="selectOrTextInputExampleController.toggleItems()">Toggle Items on/off</button> <br/> <form class="c-form c-generalForm" name="selectOrTextInputExampleController.form" autocomplete="off"> <fieldset class="c-fieldset"> <div class="c-fieldset-item"> <label for="value">Item Value</label> <select-or-text-input class="c-selectOrTextInput" id="value" name="value" tab-index="1" options="selectOrTextInputExampleController.items" ng-model="selectOrTextInputExampleController.value"> </select-or-text-input> </div> </fieldset> </form> <div ng-bind="selectOrTextInputExampleController.value"></div> </div>

Disabled, with placeholder. It displays the State as a list-item when country that is having States is selected, it displays the State as a textbox when country without States is selected.

HTML

<div class="t-content" ng-controller="selectOrTextInputExampleController as
selectOrTextInputExampleController">
    <button ng-click="selectOrTextInputExampleController.toggleItems()">Toggle Items on/off</button>
    <br/>
    <form class="c-form c-generalForm" name="selectOrTextInputExampleController.form" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="disabled_field">Item Value</label>
                <select-or-text-input
                    class="c-selectOrTextInput"
                    name="disabled_field"
                    empty-placeholder-text="'Specify value'"
                    is-disabled="true"
                    options="selectOrTextInputExampleController.items"
                    ng-model="selectOrTextInputExampleController.value">
                </select-or-text-input>
            </div>
        </fieldset>
    </form>
</div>