Select

<div class="aura-field-group">
  <label class="aura-label" id="s-label" for="s">Fruit</label>
  <button id="s" type="button" class="aura-combobox" role="combobox" aria-haspopup="listbox"
          aria-expanded="true" aria-controls="s-listbox" aria-labelledby="s-label s"
          aria-activedescendant="s-opt-0" data-state="open">
    <span class="aura-combobox__value">Apple</span>
    <span class="aura-combobox__chevron" aria-hidden="true"></span>
  </button>
</div>
<!-- Здесь нет data-side. Этот атрибут пишет place(), и именно .aura-popup[data-side] делает панель
     position: fixed — статически привязываться не к чему, поэтому фиксированная панель просто
     схлопнулась бы в угол окна. Без него панель остаётся в потоке и показывает, как выглядит
     список; в настоящем Select place() выдаёт и атрибут, и отступы в том же кадре, в котором панель
     монтируется. -->
<div class="aura-popup" data-state="open">
  <ul id="s-listbox" class="aura-listbox" role="listbox" aria-labelledby="s-label">
    <li id="s-opt-0" class="aura-listbox__option" role="option" aria-selected="true" data-active="true">
      <span class="aura-listbox__label">Apple</span>
    </li>
    <li id="s-opt-1" class="aura-listbox__option" role="option" aria-selected="false" data-active="false">
      <span class="aura-listbox__label">Cherry<span class="aura-listbox__description">In season</span></span>
    </li>
  </ul>
</div>

import { Select, Stack } from '@ilomee/aura-react';

const OPTIONS = [
  { value: 'apple', label: 'Apple', group: 'Pome' },
  { value: 'pear', label: 'Pear', group: 'Pome' },
  { value: 'cherry', label: 'Cherry', description: 'In season', group: 'Stone' },
  { value: 'durian', label: 'Durian', description: 'Out of stock', group: 'Stone', disabled: true },
];

/**
 * `minWidth` — так же, как в демо Field: панель превью сжимается по содержимому, и комбобокс
 * шириной со свой плейсхолдер менял бы размер, стоит выбрать что-то длиннее. В форме об этом
 * заботится `inline-size: 100%` самого контрола, но у превью нет формы, которую можно заполнить.
 */
export default function Demo() {
  return (
    <Stack style={{ minWidth: 260 }}>
      <Select label="Fruit" placeholder="Pick one" options={OPTIONS} />
    </Stack>
  );
}

<script setup lang="ts">
import { Select } from '@ilomee/aura-vue';
const fruit = ref('');
</script>

<template>
  <Select v-model="fruit" label="Fruit" placeholder="Pick one" :options="options" />
</template>

<script lang="ts">
  import { Select } from '@ilomee/aura-svelte';
  let fruit = $state('');
</script>

<Select bind:value={fruit} label="Fruit" placeholder="Pick one" {options} />

import { AuraSelect } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraSelect],
  template: `<aura-select label="Fruit" placeholder="Pick one" [options]="options" [(value)]="fruit" />`,
})
export class DemoComponent {
  fruit = '';
}