# Selector Option

## Usage

Helper component for custom item rendering inside an `Selector` `renderOption` prop.

```ts
import type { SelectorOption } from '@astryx-vue/core/Selector'
```

In this port `SelectorOption` is the shape of one entry in a [Selector](/en/components/selector)'s `options`, not a component of its own: `label` is the primary text and `description` the secondary line under it, which is what the original helper drew. The built-in row already renders both, so a plain object covers the common case. When a row needs more than that, the `option` slot receives the same object and replaces the content.

A bare string is also accepted as an option, and stands for the value and the label at once.

## Examples

Common configurations, variations, and states.

### Basic

A selector whose options are rendered with SelectorOption, adding a secondary description below each label. Use inside renderOption for consistent custom option styling.

```vue
<script setup lang="ts">
import { Selector } from '@astryx-vue/core/Selector'
import { ref } from 'vue'

const value = ref<string | null>('editor')

const roles = [
  { value: 'admin', label: 'Admin', description: 'Full access to all resources' },
  { value: 'editor', label: 'Editor', description: 'Can edit and publish content' },
  { value: 'viewer', label: 'Viewer', description: 'Read-only access' },
]
</script>

<template>
  <Selector v-model="value" label="Role" :options="roles" placeholder="Assign a role..." :width="300" />
</template>
```

## Props

The fields of a `SelectorOption` object. These are data, not attributes: they go into the `options` array of a [Selector](/en/components/selector), or arrive in the `option` slot.

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string \| number` | — | The value the selector reports when this option is chosen. Required, and unique inside one list. |
| `label` | `string` | — | Primary text of the row, and its accessible name. Required. |
| `description` | `string` | — | Secondary text under the label. Its own line, smaller and quieter than the label. |
| `icon` | `string` | — | Icon drawn before the label, given as a CSS icon class such as `i-carbon-user`. |
| `disabled` | `boolean` | `false` | Keeps the option in the list but stops it from being chosen. The arrows skip it. |

## Slots

The `option` slot of a `Selector` replaces the content of one row. It receives `option` (the object above), `isActive` (the row the pointer or keyboard is on), and `isSelected`.