# Select
The **Select** input component uses [HTML's native select input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select). Select inputs can be single value selections, or multi-value selections by using the `multiple` attribute. Use it with the [Field](/components/Field) component to access all the functionalities.
## Examples
## Select Component > Select an item in a list. Use with Field to access all functionalities. ```html ``` ### Props | Prop name | Description | Type | Values | Default | | ------------------ | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - |
From config:
select: {
  autocomplete: "off"
} | | customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: ValueType<unknown, IsMultiple> \| null , state: ValidityState) => string) \| undefined | - | | | disabled | Disable the input - same as native disabled | boolean | - | false | | expanded | Makes input full width when inside a grouped or addon field | boolean | - |
From config:
select: {
  expanded: false
} | | icon | Icon to be shown | string | - |
From config:
select: {
  icon: undefined
} | | iconClickable | Makes the icon clickable | boolean | - | false | | iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
select: {
  iconPack: undefined
} | | iconRight | Icon to be added on the right side | string | - |
From config:
select: {
  iconRight: undefined
} | | iconRightClickable | Make the icon right clickable | boolean | - | false | | iconRightVariant | Variant of right icon | string | - | | | id | Same as native id. Also set the `for` label for o-field wrapper - default is an uuid. | string | - | useId() | | v-model | The input value state | ValueType<unknown, IsMultiple> | - | | | multiple | Allow multiple selection - converts the `modelValue` into an array | IsMultiple | - | | | nativeSize | Same as native size | Numberish | - | | | options | Select options, unnecessary when default slot is used | SelectOptions<unknown> | - | | | override | Override existing theme classes completely | boolean | - | | | placeholder | Text when nothing is selected | string | - | | | required | Same as native required | boolean | - | false | | rounded | Makes the element rounded | boolean | - | false | | size | Vertical size of input | string | `small`, `medium`, `large` |
From config:
select: {
  size: undefined
} | | statusIcon | Show status icon using field and variant prop | boolean | - |
From config:
{
  statusIcon: true
} | | useHtml5Validation | Enable HTML 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | | variant | Color variant of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
select: {
  variant: undefined
} | ### Events | Event name | Properties | Description | | ------------------ | ---------------------------------------------------------- | ------------------------------- | | update:model-value | **value** `unknown \| unknown[]` - updated modelValue prop | modelValue prop two-way binding | | focus | **event** `Event` - native event | on input focus event | | blur | **event** `Event` - native event | on input blur event | | invalid | **event** `Event` - native event | on input invalid event | | icon-click | **event** `Event` - native event | on icon click event | | icon-right-click | **event** `Event` - native event | on icon right click event | ### Slots | Name | Description | Bindings | | ----------- | ------------------------------------------------------- | -------- | | placeholder | Override the placeholder | | | default | Define the select options here, default is options prop | |
## Class Inspector
## Sass Variables
> Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_ | SASS Variable | Default | | ----------------------------- | --------------------------------------------------------------------------- | | $select-height | h.useVar("control-height") | | $select-padding | h.useVar("control-padding-vertical") h.useVar("control-padding-horizontal") | | $select-disabled-opacity | h.useVar("control-disabled-opacity") | | $select-color | h.useVar("font-color") | | $select-font-size | h.useVar("font-size") | | $select-font-weight | h.useVar("font-weight") | | $select-line-height | h.useVar("line-height") | | $select-box-shadow | h.useVar("control-box-shadow-inset") | | $select-background-color | h.useVar("control-background-color") | | $select-border-color | h.useVar("control-border-color") | | $select-border-style | solid | | $select-border-width | h.useVar("control-border-width") | | $select-border-radius | h.useVar("border-radius") | | $select-border-radius-rounded | h.useVar("border-radius-rounded") | | $select-multiple-padding | h.useVar("control-spacer") | | $select-arrow-color | vars.$font-color | | $select-arrow-size | 1em | See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_select.scss)
> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_

The theme does not have any custom variables for this component.

> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_

The theme does not have any custom variables for this component.