<commit_before>title: Select
---
Select component has two types of selection: single selection (using Radios or Lists) or multiple selection (using Checkboxes or Toggles). This component opens up a Popover for the selection list and action. A filter can also be used for longer lists.
<input type="hidden" data-fullpage-demo="forms/select">

Works well with [QField](/components/field.html) for additional functionality such as a helper, error message placeholder and many others.

## Installation
Edit `/quasar.conf.js`:
```js
framework: {
  components: ['QSelect']
}
```

## Basic Usage

``` html
<template>
  <div>
    <!-- Single Selection using Radios -->
    <q-select
      v-model="select"
      float-label="Is Quasar Awesome?"
      radio
     :options="selectOptions"
    />

    <!-- Single Selection as a simple List -->
    <q-select
      v-model="select"
      :options="selectOptions"
    />

    <!-- Multiple Selection using Checkboxes by default -->
    <q-select
      multiple
      v-model="multipleSelect"
      :options="selectOptions"
    />

    <!-- Multiple Selection using Toggles -->
    <q-select
      multiple
      toggle
      v-model="multipleSelect"
      :options="selectOptions"
      @change="inputChange"
    />
    <!-- Advanced Select List Object Example-->
    <q-select
      v-model="select"
      :options="selectAdvancedListOptions"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectOptions: [
        {
          label: 'Google',
          value: 'goog'
        },
        {
          label: 'Facebook',
          value: 'fb'
        }
      ],
      selectAdvancedListOptions: [
        {
          label: 'Google',
          icon: 'search',
          value: 'goog'
        },
        {
          label: 'Facebook',
          inset: true,
          sublabel: 'Enables communication',
          value: 'fb'
        },
        {
          label: 'Oracle',
          sublabel: 'Some Java for today?',

          icon: 'mail',
          leftColor: 'secondary', // color for left side, whatever it is (icon, letter, ...)

          rightIcon: 'alarm',
          rightColor: 'negative', // color for right side, whatever it is (icon, letter, ...)

          value: 'ora'
        },
        {
          label: 'Apple Inc.',
          inset: true,
          stamp: '10 min',
          value: 'appl'
        }
      ]
    }
  }
}
</script>
```

> **IMPORTANT**
> **Starting with Quasar v0.17.10+, please make sure the labels are sanitized, otherwise your app might be a target for XSS attacks.**

## Vue Properties
Supports `v-model` which should be the String for single selection and Array for multiple selection.

| Vue Property | Type | Description |
| --- | --- | --- |
| `options` | Array | (**Required**) A list of objects to present as the selection's options. See below for the data format for the array. |
| `multiple` | Boolean | If set to `true`, multiple selections will be allowed. |
| `radio` | Boolean | If set to `true`, the selection will be through radios. For single selection only. |
| `toggle` | Boolean | If set to `true`, the selection options will offer a toggle to select them. |
| `chips` | Boolean | If set to `true`, the selections will appear as chips (instead of comma separated strings) on the input frame (works for multiple selection only). |
| `chips-color` | String | Override default children chips text color. |
| `chips-bg-color` | String | Override default children chips background color. |
| `readonly` | Boolean | If set to `true`, select is readonly and the user cannot change model. |
| `filter` | Boolean/Function(terms,obj) | If set to `true` or supplying a filter function, the selections will offer an input to filter the selection options. |
| `autofocus-filter` | Boolean | Auto-focus on the filter input field (if available) when opening selection. |
| `filter-placeholder` | String | A text to show in the filter input field. Default is "Filter". |
| `separator` | Boolean | If set to `true`, the selection options will be separated by a line. |
| `display-value` | String | Overrides text displayed in input frame. See "Working with Display Value" section below. |
| `placeholder` | String | Placeholder text. |
| `clearable` | Boolean | If used, the component offers the user an actionable icon to reset the current value to `clear-value` (which is by default `null` for single selection and `[]` for multiple selection). The icon appears only when the current value matches `clear-value`. |
| `clear-value` | String | The value to which to reset the field model to when using `clearable`. The default value is `null` for single selection and `[]` for a multiple selection. |
| `no-icon` | Boolean | Use no icon on left side |

Common input frame properties:

| Property | Type | Description |
| --- | --- | --- |
| `prefix` | String | A text that should be shown before the textfield. |
| `suffix` | String | A text that should be shown after the textfield. |
| `float-label` | String | A text label that will "float" up above the input field, once the input field gets focus. |
| `stack-label` | String | A text label that will be shown above the input field and is static. |
| `color` | String | One from [Quasar Color Palette](/components/color-palette.html). |
| `inverted` | Boolean | Inverted mode. Color is applied to background instead. |<commit_msg>Update QSelect<commit_after>title: Select
---
Select component has two types of selection: single selection (using Radios or Lists) or multiple selection (using Checkboxes or Toggles). This component opens up a Popover for the selection list and action. A filter can also be used for longer lists.
<input type="hidden" data-fullpage-demo="forms/select">

Works well with [QField](/components/field.html) for additional functionality such as a helper, error message placeholder and many others.

## Installation
Edit `/quasar.conf.js`:
```js
framework: {
  components: ['QSelect']
}
```

## Basic Usage

``` html
<template>
  <div>
    <!-- Single Selection using Radios -->
    <q-select
      v-model="select"
      float-label="Is Quasar Awesome?"
      radio
     :options="selectOptions"
    />

    <!-- Single Selection as a simple List -->
    <q-select
      v-model="select"
      :options="selectOptions"
    />

    <!-- Multiple Selection using Checkboxes by default -->
    <q-select
      multiple
      v-model="multipleSelect"
      :options="selectOptions"
    />

    <!-- Multiple Selection using Toggles -->
    <q-select
      multiple
      toggle
      v-model="multipleSelect"
      :options="selectOptions"
      @change="inputChange"
    />
    <!-- Advanced Select List Object Example-->
    <q-select
      v-model="select"
      :options="selectAdvancedListOptions"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectOptions: [
        {
          label: 'Google',
          value: 'goog'
        },
        {
          label: 'Facebook',
          value: 'fb'
        }
      ],
      selectAdvancedListOptions: [
        {
          label: 'Google',
          icon: 'search',
          value: 'goog'
        },
        {
          label: 'Facebook',
          inset: true,
          sublabel: 'Enables communication',
          value: 'fb'
        },
        {
          label: 'Oracle',
          sublabel: 'Some Java for today?',

          icon: 'mail',
          leftColor: 'secondary', // color for left side, whatever it is (icon, letter, ...)

          rightIcon: 'alarm',
          rightColor: 'negative', // color for right side, whatever it is (icon, letter, ...)

          value: 'ora'
        },
        {
          label: 'Apple Inc.',
          inset: true,
          stamp: '10 min',
          value: 'appl'
        }
      ]
    }
  }
}
</script>
```

> **IMPORTANT**
> **Starting with Quasar v0.17.10+, please make sure the labels are sanitized, otherwise your app might be a target for XSS attacks.**

## Vue Properties
Supports `v-model` which should be the String for single selection and Array for multiple selection.

| Vue Property | Type | Description |
| --- | --- | --- |
| `options` | Array | (**Required**) A list of objects to present as the selection's options. See below for the data format for the array. |
| `multiple` | Boolean | If set to `true`, multiple selections will be allowed. |
| `radio` | Boolean | If set to `true`, the selection will be through radios. For single selection only. |
| `toggle` | Boolean | If set to `true`, the selection options will offer a toggle to select them. |
| `chips` | Boolean | If set to `true`, the selections will appear as chips (instead of comma separated strings) on the input frame (works for multiple selection only). |
| `chips-color` | String | Override default children chips text color. |
| `chips-bg-color` | String | Override default children chips background color. |
| `readonly` | Boolean | If set to `true`, select is readonly and the user cannot change model. |
| `filter` | Boolean/Function(terms,obj) | If set to `true` or supplying a filter function, the selections will offer an input to filter the selection options. |
| `autofocus-filter` | Boolean | Auto-focus on the filter input field (if available) when opening selection. |
| `filter-placeholder` | String | A text to show in the filter input field. Default is "Filter". |
| `separator` | Boolean | If set to `true`, the selection options will be separated by a line. |
| `display-value` | String | Overrides text displayed in input frame. See "Working with Display Value" section below. |
| `placeholder` | String | Placeholder text. |
| `clearable` | Boolean | If used, the component offers the user an actionable icon to reset the current value to `clear-value` (which is by default `null` for single selection and `[]` for multiple selection). The icon appears only when the current value matches `clear-value`. |
| `clear-value` | String | The value to which to reset the field model to when using `clearable`. The default value is `null` for single selection and `[]` for a multiple selection. |
| `no-icon` | Boolean | Use no icon on left side |
| `popup-max-height` | String | (v0.17.13+) Maximum height of popup described in CSS units. |

Common input frame properties:

| Property | Type | Description |
| --- | --- | --- |
| `prefix` | String | A text that should be shown before the textfield. |
| `suffix` | String | A text that should be shown after the textfield. |
| `float-label` | String | A text label that will "float" up above the input field, once the input field gets focus. |
| `stack-label` | String | A text label that will be shown above the input field and is static. |
| `color` | String | One from [Quasar Color Palette](/components/color-palette.html). |
| `inverted` | Boolean | Inverted mode. Color is applied to background instead. |
{'fraction_non_alphanumeric': 0.11624276925902122, 'fraction_numerical': 0.0017445597282159581, 'mean_word_length': 2.7558620689655173, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 5, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2199992', 'n_tokens_mistral': 3018, 'n_tokens_neox': 2924, 'n_words': 1228}