Select

<script type="module" src="@arclux/arc-ui"></script>

<!-- Basic select -->
<arc-select label="Assign to team member" placeholder="Choose a person...">
  <arc-option value="alice-chen">Alice Chen</arc-option>
  <arc-option value="bob-martinez">Bob Martinez</arc-option>
  <arc-option value="carol-nguyen">Carol Nguyen</arc-option>
  <arc-option value="david-okafor">David Okafor</arc-option>
  <arc-option value="eva-johansson">Eva Johansson</arc-option>
</arc-select>

<!-- Pre-selected value -->
<arc-select label="Status" value="in-progress">
  <arc-option value="open">Open</arc-option>
  <arc-option value="in-progress">In Progress</arc-option>
  <arc-option value="review">In Review</arc-option>
  <arc-option value="done">Done</arc-option>
</arc-select>

<!-- In a native form -->
<form action="/api/assign" method="post">
  <arc-select name="assignee" label="Assignee" placeholder="Pick someone...">
    <arc-option value="alice">Alice</arc-option>
    <arc-option value="bob">Bob</arc-option>
  </arc-select>
  <button type="submit">Save</button>
</form>

<script>
  document.querySelector('arc-select')
    .addEventListener('arc-change', (e) => {
      console.log('Selected:', e.detail.value, e.detail.label);
    });
</script>

import { Select, Option } from '@arclux/arc-ui-react';
import { useState } from 'react';

function TeamAssigner() {
  const [assignee, setAssignee] = useState('');

  return (
    <Select
      label="Assign to team member"
      placeholder="Choose a person..."
      value={assignee}
      onArcChange={(e) => setAssignee(e.detail.value)}
    >
      <Option value="alice-chen">Alice Chen</Option>
      <Option value="bob-martinez">Bob Martinez</Option>
      <Option value="carol-nguyen">Carol Nguyen</Option>
      <Option value="david-okafor">David Okafor</Option>
      <Option value="eva-johansson">Eva Johansson</Option>
    </Select>
  );
}

function StatusPicker() {
  return (
    <Select label="Status" value="in-progress">
      <Option value="open">Open</Option>
      <Option value="in-progress">In Progress</Option>
      <Option value="review">In Review</Option>
      <Option value="done">Done</Option>
    </Select>
  );
}

<script setup>
import { Select, Option } from '@arclux/arc-ui-vue';
import { ref } from 'vue';

const assignee = ref('');
</script>

<template>
  <Select
    label="Assign to team member"
    placeholder="Choose a person..."
    :value="assignee"
    @arc-change="assignee = $event.detail.value"
  >
    <Option value="alice-chen">Alice Chen</Option>
    <Option value="bob-martinez">Bob Martinez</Option>
    <Option value="carol-nguyen">Carol Nguyen</Option>
    <Option value="david-okafor">David Okafor</Option>
    <Option value="eva-johansson">Eva Johansson</Option>
  </Select>
</template>

<script>
  import { Select, Option } from '@arclux/arc-ui-svelte';

  let status = 'open';
</script>

<Select label="Task status" value={status}
  on:arc-change={(e) => status = e.detail.value}>
  <Option value="open">Open</Option>
  <Option value="in-progress">In Progress</Option>
  <Option value="review">In Review</Option>
  <Option value="done">Done</Option>
  <Option value="closed">Closed</Option>
</Select>

import { Component } from '@angular/core';
import { Select, Option } from '@arclux/arc-ui-angular';

@Component({
  imports: [Select, Option],
  template: `
    <arc-select label="Assign to team member" placeholder="Choose a person..."
      [value]="assignee" (arc-change)="assignee = $event.detail.value">
      <arc-option value="alice-chen">Alice Chen</arc-option>
      <arc-option value="bob-martinez">Bob Martinez</arc-option>
      <arc-option value="carol-nguyen">Carol Nguyen</arc-option>
      <arc-option value="david-okafor">David Okafor</arc-option>
      <arc-option value="eva-johansson">Eva Johansson</arc-option>
    </arc-select>
  `,
})
export class AssignmentComponent {
  assignee = '';
}

import { Select, Option } from '@arclux/arc-ui-solid';
import { createSignal } from 'solid-js';

function CategoryPicker() {
  const [category, setCategory] = createSignal('');

  return (
    <Select label="Category" placeholder="Choose a category..."
      value={category()} onArcChange={(e) => setCategory(e.detail.value)}>
      <Option value="bug">Bug Report</Option>
      <Option value="feature">Feature Request</Option>
      <Option value="docs">Documentation</Option>
      <Option value="question">Question</Option>
    </Select>
  );
}

import { Select, Option } from '@arclux/arc-ui-preact';
import { useState } from 'preact/hooks';

function LocalePicker() {
  const [locale, setLocale] = useState('en');

  return (
    <Select label="Language" value={locale}
      onArcChange={(e) => setLocale(e.detail.value)}>
      <Option value="en">English</Option>
      <Option value="es">Español</Option>
      <Option value="fr">Français</Option>
      <Option value="de">Deutsch</Option>
      <Option value="ja">日本語</Option>
    </Select>
  );
}