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>
<!-- No data-side here. That attribute is what place() writes, and .aura-popup[data-side] is
     what turns the panel into position: fixed — statically there is nothing to anchor to, so a
     fixed panel would just collapse into the corner of the window. Left off, the panel stays in
     flow and shows what the list looks like; in a real Select, place() supplies the attribute
     and the insets in the same frame that mounts it. -->
<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`, as the Field demo does it: the preview panel is shrink-to-fit, and a combobox
 * sized to its own placeholder would resize the moment you picked something longer. In a form
 * the control's `inline-size: 100%` handles this; a preview has no form to fill.
 */
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 = '';
}