ionic-framework/packages/angular/demo/src/app/inputs/inputs-test-page.component.html

<div class="title">
  Ionic Core Inputs Demo
</div>

<ion-grid>

  <ion-row>
    <ion-col>
      <h2>Text Input</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdTextInput">Standard Input</label>
      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" />
    </ion-col>
    <ion-col>
      Value:
      <span id="textOutput">{{textValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Text Input</ion-label>
        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10" (ionBlur)="onBlur($event)"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Textarea Input</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdTextareaInput">Standard Textarea Input</label>
      <textarea id="stdTextareaInput" name="stdTextareaInput" [(ngModel)]="textareaValue" minlength="10"></textarea>
    </ion-col>
    <ion-col>
      Value:
      <span id="textareaOutput">{{textareaValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Textarea Input</ion-label>
        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="textareaValue" minlength="10" (ionBlur)="onBlur($event)"></ion-textarea>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Checkbox</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdCheckbox">Standard Checkbox</label>
      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" (blur)="onBlur($event)" />
    </ion-col>
    <ion-col>
      Value:
      <span id="checkboxOutput">{{checkboxValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Checkbox</ion-label>
        <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue" (ionBlur)="onBlur($event)"></ion-checkbox>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Select</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdSelect">Standard Select (for tacos)</label>
      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
        <option value="beef">Carne Asada</option>
        <option value="tongue">Lengua</option>
        <option value="brains">Sesos</option>
        <option value="tripe">Tripa</option>
        <option value="chicken">Pollo</option>
      </select>
    </ion-col>
    <ion-col>
      Value:
      <span id="selectOutput">{{selectValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Select (for tacos)</ion-label>
        <ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
          <ion-select-option value="beef">Carne Asada</ion-select-option>
          <ion-select-option value="tongue">Lengua</ion-select-option>
          <ion-select-option value="brains">Sesos</ion-select-option>
          <ion-select-option value="tripe">Tripa</ion-select-option>
          <ion-select-option value="chicken">Pollo</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Toggle</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdToggle">Standard Toggle</label>
      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" (blur)="onBlur($event)" />
    </ion-col>
    <ion-col>
      Value:
      <span id="toggleOutput">{{toggleValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Toggle</ion-label>
        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" (ionBlur)="onBlur($event)"></ion-toggle>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>
</ion-grid>

<a href='home'>Home</a>