> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Select Input

> InputSelect.vue Component Documentation

The `InputSelect.vue` component is a reusable Vue.js Composition API component for creating select dropdowns. It supports various configurations for options, including arrays, objects, and shaped data, making it versatile for different use cases.

***

## Features

<CardGroup cols={2}>
  <Card title="Dynamic Options" icon="square-1">
    Accepts both arrays and objects as data sources for dropdown options.
  </Card>

  <Card title="Data Shaping" icon="square-2">
    Supports key-value mapping for custom option structures.
  </Card>

  <Card title="Nullable Options" icon="square-3">
    Allows the inclusion of an empty option in the dropdown.
  </Card>

  <Card title="Customizable Label" icon="square-4">
    Displays a label for the select dropdown.
  </Card>

  <Card title="Multiple Select" icon="square-5">
    Works with multiple selection.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { InputSelect } from '@robojuice/velure-ui';
```

```vue theme={null}
<InputSelect label="Select" :options="[1, 2, 3]" />
```

### Multiple Select

```vue theme={null}
<InputSelect multiple label="Select" :options="[1, 2, 3]" />
```

### Disabled Select

```vue theme={null}
<InputSelect
  label="Select"
  :options="[1, 2, 3]"
/>
```

### Object Options with Shape

```vue theme={null}
<InputSelect
  v-model="selectedOption"
  label="Select a state"
  :options="[{id: 'CA', name: 'California'}, {id: 'NY', name: 'New York'}]"
  :shape="{ value: 'id', text: 'name' }"
/>
```

***

## Props

<ParamField path="v-model" type="string | number | object" default="undefined">
  The value bound to the selected option.
</ParamField>

<ParamField path="type" type="string" default="'text'">
  The input type (not commonly used with this component).
</ParamField>

<ParamField path="options" type="array | object" default="undefined">
  The data source for the dropdown options.
</ParamField>

<ParamField path="shape" type="object" default="{}">
  Defines the keys for mapping option values (`value`) and labels (`text`).
</ParamField>

<ParamField path="width" type="number | string" default="100">
  The width of the component as a percentage.
</ParamField>

<ParamField path="label" type="string" default="''">
  The label displayed above the select element.
</ParamField>

<ParamField path="error" type="string" default="null">
  Displays an error message and applies error styling when provided.
</ParamField>

<ParamField path="labelEmpty" type="string | boolean" default="''">
  Text for the empty option (`false` disables the empty option).
</ParamField>

<ParamField path="nullable" type="boolean" default="false">
  Allows an empty value option if set to `true`.
</ParamField>

***

## Example Use Cases

### Reactive Selection

Bind the selected value using `v-model`:

```vue theme={null}
<template>
  <InputSelect
    v-model="selectedOption"
    label="Select an option"
    :options="[1, 2, 3]"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectedOption = ref('');
</script>
```

***

## Notes

* The `labelEmpty` prop can provide a placeholder or empty selection option, e.g., `labelEmpty="Select one"`.
* The `nullable` prop must be set to `true` if you want the empty option to be selectable.
* Supports two-way data binding with `v-model` for dynamic updates.