---
metaTitle: Select Native component | AwesCode UI
meta:
  - name: description
    content: The <AwSelectNative /> component is used to render Native Select dropdown - UI Vue component for AwesCode UI.
title: Select Native
---

# Select Native

**Category:** Atom | **Import:** Global

The `AwSelectNative` component is a styled wrapper around the native HTML select element with label and error handling.

## Overview

`AwSelectNative` provides a native select dropdown with consistent styling, label support, prefix/postfix slots, and error handling. It's useful for simple dropdowns where native behavior is preferred.

## Usage

### Basic Example

```markup
<AwSelectNative 
    :options="['Option 1', 'Option 2', 'Option 3']"
    v-model="selected"
/>
```

### With Objects

```markup
<AwSelectNative 
    :options="options"
    option-label="name"
    track-by="id"
    v-model="selected"
/>
```

### With Label and Error

```markup
<AwSelectNative 
    label="Choose option"
    :options="options"
    v-model="selected"
    :error="error"
/>
```

### With Prefix/Postfix

```markup
<AwSelectNative 
    prefix="https://"
    postfix=".com"
    :options="domains"
    v-model="selected"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| options | Array of options (strings or objects) | `Array` | `false` | `[]` |
| value | Selected value | `String` / `Number` / `Object` | `false` | `null` |
| optionLabel | Property name or function to get label | `String` / `Function` | `false` | `''` |
| optionDisabled | Function to determine if option is disabled | `Function` | `false` | `() => false` |
| trackBy | Property name or function to get value | `String` / `Function` | `false` | `''` |
| size | Input size (sm, md) | `String` | `false` | `'md'` |
| prefix | Prefix text or slot content | `String` | `false` | `''` |
| postfix | Postfix text or slot content | `String` | `false` | `''` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| prefix | Custom prefix content | - | Prefix text |
| postfix | Custom postfix content | - | Postfix text |
| label | Custom label content | - | Label text |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `value` | Emitted when selection changes |

## Component Behavior

### Option Handling

The component supports two types of options:

#### String Arrays
```javascript
options: ['Option 1', 'Option 2', 'Option 3']
```
- Simple string arrays where each string is both the label and value
- Ideal for basic dropdowns with simple text options

#### Object Arrays
```javascript
options: [
  { id: 1, name: 'Option 1' },
  { id: 2, name: 'Option 2' }
]
```
- Requires `optionLabel` prop to specify which property to display
- Requires `trackBy` prop to specify which property to use as value
- Supports nested properties using dot notation (e.g., `'user.name'`)

### Option Label and TrackBy

Both `optionLabel` and `trackBy` props accept:

**String (property path):**
```markup
<AwSelectNative
  :options="users"
  option-label="name"
  track-by="id"
/>
```

**Function:**
```markup
<AwSelectNative
  :options="users"
  :option-label="user => `${user.firstName} ${user.lastName}`"
  :track-by="user => user.id"
/>
```

**Nested properties:**
```markup
<AwSelectNative
  :options="items"
  option-label="user.profile.name"
  track-by="user.id"
/>
```

### Disabled Options

The `optionDisabled` prop accepts a function that determines if an option should be disabled:

```javascript
optionDisabled(option) {
  return !option.available || option.stock === 0
}
```

Disabled options appear in the dropdown but cannot be selected.

### Label Behavior

- Label appears as floating label inside the select field
- When option is selected, label moves to top position (filled state)
- Required indicator (`*`) shown when field has `required` attribute
- Label slot provides full customization

### Prefix and Postfix

- **Prefix:** Displayed before the select dropdown (e.g., "https://")
- **Postfix:** Displayed after the select dropdown (e.g., ".com")
- Both support text or custom slot content
- Useful for adding context or units to the selection

### Size Variants

- **sm:** Smaller padding (p-2) - compact dropdowns
- **md:** Medium padding (p-3) - default, standard size

### Error Handling

Extends ErrorMixin for error management:
- Shows error tooltip on hover when error is present
- Error state adds visual styling via `has-error` class
- Error automatically clears when selection changes
- Error message displayed via tooltip

### Field States

The component applies CSS classes based on state:
- `is-filled` - When a valid option is selected
- `has-label` - When label prop is provided
- `has-error` - When error is present
- `is-disabled` - When disabled attribute is set
- `has-prefix` - When prefix is provided
- `has-postfix` - When postfix is provided

### Native Select Element

- Uses native HTML `<select>` element for better mobile support
- Inherits all standard HTML select attributes via `$attrs`
- Native mobile picker UI on iOS and Android
- Better accessibility with native keyboard navigation
- No custom dropdown UI to maintain

### Structure

```
<div class="aw-text-field is-select">
  <div class="aw-text-field__prefix">Prefix</div>
  <div class="relative">
    <select class="aw-text-field__element">
      <option>...</option>
    </select>
    <label class="aw-text-field__label">Label</label>
    <div class="aw-text-field__caret">▼</div>
  </div>
  <div class="aw-text-field__postfix">Postfix</div>
</div>
```

## Related Components

- `AwSelect` - Advanced select component with search and custom options
- `AwSelectObject` - Select component for object options
- `AwInput` - Input component with similar styling

## Notes

- **Import Method:** Global - Available as atom component
- Uses native HTML select element for better mobile support
- Supports both string arrays and object arrays
- When using objects, provide `optionLabel` and `trackBy` props
- Inherits error handling from error mixin
- Inherits field mixin for label and ID management