<!-- AUTO-GENERATED from the @riverty/web-components custom elements manifest. Do not edit by hand. -->

# r-select-option

`<r-select-option>` represents a single choice inside `<r-select>`.

Accessibility:
- Hosts `role="option"` and `aria-selected` / `aria-disabled`.
- Emits granular events consumed by the parent select for state + keyboard logic.

Keyboard (handled by parent `<r-select>`):
- Arrow keys move focus between options.
- Enter/Space commit the focused option.
- Typeahead supported via characters typed while the listbox is open.

Do not use directly outside `<r-select>`.

Example
```
<r-select name="size" label="Select size">
  <r-select-option value="s">Small</r-select-option>
  <r-select-option value="m" selected>Medium</r-select-option>
  <r-select-option value="l">Large</r-select-option>
  <r-select-option value="xl" disabled>Extra large</r-select-option>
</r-select>
```

## class: `RSelectOption`, `r-select-option`

### Fields

| Name           | Privacy | Type                | Default                           | Description                                                                                                                                    | Inherited From |
| -------------- | ------- | ------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `disabled`     |         | `boolean`           | `false`                           | When true, the option is not focusable or selectable.                                                                                          |                |
| `icon`         |         | `string`            |                                   | Name of an icon from the design system icon set to render with the option.<br>Mutually exclusive with a provided `<slot name="icon">`.        |                |
| `iconColor`    |         | `string`            | `'var(--r-select-option--color)'` | Icon color token / CSS color value (when `icon` provided).                                                                                     |                |
| `iconPosition` |         | `"end" \| "start"`  | `'start'`                         | Icon position relative to label content.                                                                                                       |                |
| `iconSize`     |         | `"l" \| "m" \| "s"` | `'m'`                             | Icon size (applied when `icon` provided).                                                                                                      |                |
| `label`        |         | `string`            |                                   | Presentational label. Falls back to slotted text; finally to `value`.<br>Use `label` if the rendered text differs from the submitted `value`. |                |
| `selected`     |         | `boolean`           | `false`                           | Marks the option as selected. Controlled by `<r-select>`; not user‑set in isolation.                                                           |                |
| `value`        |         | `string`            |                                   | Value submitted with a form when this option is selected.<br>If omitted or empty, it's auto-filled from text content / `label`.               |                |

### Methods

| Name            | Privacy | Description                                                                                                                                                                                                                                                                                                                                                                 | Parameters | Return          | Inherited From |
| --------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------- | -------------- |
| `clearSelected` |         | Clears the current selection state for this option by setting `isSelected` to `false`.<br><br>Intended for use when programmatically resetting or updating the selection (e.g., on form reset<br>or when enforcing single-selection logic in a parent component).<br><br>Side effects:<br>\- Triggers any reactive updates or re-renders that depend on `isSelected`. |            | `Promise<void>` |                |
| `setBlur`       |         | Removes the component's focus state programmatically.                                                                                                                                                                                                                                                                                                                       |            | `Promise<void>` |                |
| `setFocus`      |         | Sets the component's focus state programmatically.                                                                                                                                                                                                                                                                                                                          |            | `Promise<void>` |                |
| `setSelected`   |         | Marks this option as selected.<br><br>Sets the internal `isSelected` flag to `true`. Declared as `async` to allow for<br>future asynchronous side effects or integration with async selection workflows,<br>and may be safely awaited by callers.<br><br>Idempotent: calling it multiple times will keep the option selected.                                         |            | `Promise<void>` |                |

### Events

| Name          | Type                                                              | Description                                                                                                             | Inherited From |
| ------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------- |
| `optionClick` | `CustomEvent<{ element: HTMLRSelectOptionElement; value: any; }>` | Fires when the option is activated via pointer (not disabled).<br>Payload includes the element + its value (resolved). |                |

### Attributes

| Name            | Field        | Inherited From |
| --------------- | ------------ | -------------- |
| `disabled`      | disabled     |                |
| `icon`          | icon         |                |
| `icon-color`    | iconColor    |                |
| `icon-position` | iconPosition |                |
| `icon-size`     | iconSize     |                |
| `label`         | label        |                |
| `selected`      | selected     |                |
| `value`         | value        |                |

### Slots

| Name   | Description                                |
| ------ | ------------------------------------------ |
|        | Option label text                          |
| `icon` | Custom icon placed before the option label |

<hr/>

## Exports

| Kind                        | Name              | Declaration   | Module | Package |
| --------------------------- | ----------------- | ------------- | ------ | ------- |
| `js`                        | `RSelectOption`   | RSelectOption |        |         |
| `custom-element-definition` | `r-select-option` | RSelectOption |        |         |