<commit_before><h2 id="select" class="section-header">Select</h2>

<a target="_blank" class="improve-v2-docs" href="https://github.com/driftyco/ionic-site/edit/master/_includes/v2_fluid/component-docs/select.html">
  Improve this Doc
</a>


<h3 class="section-nav">Basic Usage</h3>
<a target="_blank" class="component-doc-demo" href="https://github.com/driftyco/ionic-preview-app/tree/master/app/pages/selects/basic">
  Demo Source
</a>
  
The `ion-select` component is similar to an HTML `<select>` element, however, Ionic's select component makes it easier for users to sort through and select the preferred option or options. When users tap the select component, a  dialog will appear with all of the options in a large, easy to select list for users.

```html

<ion-list>
  <ion-label>Gaming</ion-label>
  <ion-select [(ngModel)]="gaming">
    <ion-option value="nes">NES</ion-option>
    <ion-option value="n64">Nintendo64</ion-option>
    <ion-option value="ps">PlayStation</ion-option>
    <ion-option value="genesis">Sega Genesis</ion-option>
    <ion-option value="saturn">Sega Saturn</ion-option>
    <ion-option value="snes">SNES</ion-option>
  </ion-select>
</ion-list>

```

You can make multiple selection with `<ion-select>` by adding `multiple="true"` to the element

```
<ion-list>
  <ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
    <ion-option value="bacon" checked="true">Bacon</ion-option>
    <ion-option value="olives">Black Olives</ion-option>
    <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
    <ion-option value="peppers">Green Peppers</ion-option>
    <ion-option value="mushrooms">Mushrooms</ion-option>
    <ion-option value="onions">Onions</ion-option>
    <ion-option value="pepperoni">Pepperoni</ion-option>
    <ion-option value="pineapple">Pineapple</ion-option>
    <ion-option value="sausage">Sausage</ion-option>
    <ion-option value="Spinach">Spinach</ion-option>
  </ion-select>
</ion-item><commit_msg>docs(select): update select component demo snippet Closes #530<commit_after><h2 id="select" class="section-header">Select</h2>

<a target="_blank" class="improve-v2-docs" href="https://github.com/driftyco/ionic-site/edit/master/_includes/v2_fluid/component-docs/select.html">
  Improve this Doc
</a>


<h3 class="section-nav">Basic Usage</h3>
<a target="_blank" class="component-doc-demo" href="https://github.com/driftyco/ionic-preview-app/tree/master/app/pages/selects/basic">
  Demo Source
</a>

The `ion-select` component is similar to an HTML `<select>` element, however, Ionic's select component makes it easier for users to sort through and select the preferred option or options. When users tap the select component, a  dialog will appear with all of the options in a large, easy to select list for users.

```html

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
      <ion-option value="genesis">Sega Genesis</ion-option>
      <ion-option value="saturn">Sega Saturn</ion-option>
      <ion-option value="snes">SNES</ion-option>
      </ion-select>
      </ion-item>
</ion-list>

```

You can make multiple selection with `<ion-select>` by adding `multiple="true"` to the element

```
<ion-list>
  <ion-item>
    <ion-label>Toppings</ion-label>
    <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
      <ion-option value="bacon" checked="true">Bacon</ion-option>
      <ion-option value="olives">Black Olives</ion-option>
      <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
      <ion-option value="peppers">Green Peppers</ion-option>
      <ion-option value="mushrooms">Mushrooms</ion-option>
      <ion-option value="onions">Onions</ion-option>
      <ion-option value="pepperoni">Pepperoni</ion-option>
      <ion-option value="pineapple">Pineapple</ion-option>
      <ion-option value="sausage">Sausage</ion-option>
      <ion-option value="Spinach">Spinach</ion-option>
    </ion-select>
  </ion-item>
{'fraction_non_alphanumeric': 0.16950354609929077, 'fraction_numerical': 0.005437352245862884, 'mean_word_length': 4.574440052700922, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 115, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4635410', 'n_tokens_mistral': 1469, 'n_tokens_neox': 1405, 'n_words': 294}