---
title: "Select (Dropdown)"
slug: "select"
category: "Mini Widgets"
reactComponent: "ArcWidgetSelect"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "select.tsx"
locale: "es"
hosts: "react"
---

# Select en React

Elige una opción de una lista. El valor, la etiqueta visible y las entradas activas se derivan del estado de React.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
import { ArcWidgetSelect } from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const requested = new URLSearchParams(location.search).get('data');
const pack = requested === 'empty' || requested === 'busy' ? requested : 'demo';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

const demoOptions = [
  { value: 'open', title: t('Offen', 'Open', 'Abierto') },
  { value: 'work', title: t('In Arbeit', 'In progress', 'En curso') },
  { value: 'done', title: t('Erledigt', 'Done', 'Hecho') },
];

const busyOptions = [
  ...demoOptions,
  { value: 'wait', title: t('Wartet', 'Waiting', 'En espera') },
  { value: 'hold', title: t('Pausiert', 'On hold', 'En pausa') },
];

const options =
  pack === 'empty' ? [] : pack === 'busy' ? busyOptions : demoOptions;

export default function Example() {
  const [status, setStatus] = useState<string | number | null>(null);
  const all = t('Alle', 'All', 'Todos');
  return (
    <>
      <ArcWidgetSelect
        id="status"
        data={{
          width: '240px',
          currentValue:
            options.find((option) => option.value === status)?.title ?? all,
          items: options.map((option) => ({
            ...option,
            active: option.value === status,
          })),
          reset: { title: all },
        }}
        onChange={setStatus}
      />
      <p aria-live="polite">
        {t('Status', 'Status', 'Estado')}: {status ?? all}
      </p>
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetSelectData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

### onChange

Adopta el nuevo valor de entrada en tu estado.

```typescript
onChange?: (value: string | number | null) => void;
```

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### items

Entradas de la selección o de la representación; ver el tipo de dato correspondiente.

Tipo: `ArcWidgetSelectItem[]`.

### width

Ancho del widget como valor de tamaño.

Tipo: `string`.

### height

Alto del widget, p. ej. `"320px"`. Los valores en porcentaje necesitan un contenedor padre con altura fija.

Tipo: `string`.

### itemsWidth

Ancho de la lista de selección.

Tipo: `string`.

### itemsHeight

Alto de la lista de selección.

Tipo: `string`.

### alignX

Alineación horizontal.

Tipo: `string`.

### fontColor

Color de la fuente.

Tipo: `string`.

### fontSize

Tamaño de fuente como valor CSS.

Tipo: `string`.

### fontWeight

Grosor de la fuente.

Tipo: `string | number`.

### backgroundColor

Color de fondo.

Tipo: `string`.

### borderColor

Color del borde.

Tipo: `string`.

### borderWidth

Grosor del borde.

Tipo: `string`.

### borderRadius

Redondeo de las esquinas.

Tipo: `string`.

### disabled

Desactiva la entrada.

Tipo: `boolean`.

### multiselect

Mantiene la lista abierta para selección múltiple; el callback entrega un valor individual.

Tipo: `boolean`.

### emptyValue

Etiqueta para selección vacía.

Tipo: `string`.

### clickPosition

Posicionamiento al abrir.

Tipo: `string`.

### currentValue

Valor de visualización actual.

Tipo: `ArcWidgetSlot`.

### icon

Símbolo opcional o slot de contenido admitido.

Tipo: `ArcWidgetSlot`.

### placeholder

Aviso cuando el valor está vacío.

Tipo: `string`.

### focusAction

Ajustes al enfocar, por ejemplo `autoFocus`.

Tipo: `{ autoFocus?: boolean; [key: string]: unknown }`.

### reset

Configuración de la función de restablecimiento.

Tipo: `ArcWidgetSelectReset`.

## Comportamiento y límites

- `items[].value` es el valor del callback. `currentValue` es la etiqueta visible; `items[].active` marca la selección. Mantén los tres actualizados desde el mismo estado.

- `multiselect: true` mantiene la lista abierta. El callback sigue entregando el valor individual pulsado; añadir o quitar de un conjunto de selección lo implementas tú mismo.

- El reset entrega `null`. Gestiona este caso de forma explícita.

En Select, en `0.1.0-alpha.5`, usa texto para las etiquetas de las opciones. Los elementos JSX directos provocan un error en la comparación interna de datos; los descriptores de widget aún no se renderizan en el dropdown externalizado. El ejemplo en vivo muestra un badge separado a partir del mismo estado de selección. Los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetSelectItem {
	title?: ArcWidgetSlot;
	active?: boolean;
	value?: string | number;
	[key: string]: unknown;
}

export interface ArcWidgetSelectReset {
	title?: ArcWidgetSlot;
	value?: string | number;
	hide?: boolean;
	[key: string]: unknown;
}

export interface ArcWidgetSelectData extends Omit<ArcWidgetBaseData, 'actions'> {
	items?: ArcWidgetSelectItem[];
	width?: string;
	height?: string;
	itemsWidth?: string;
	itemsHeight?: string;
	alignX?: string;
	fontColor?: string;
	fontSize?: string;
	fontWeight?: string | number;
	backgroundColor?: string;
	borderColor?: string;
	borderWidth?: string;
	borderRadius?: string;
	disabled?: boolean;
	multiselect?: boolean;
	emptyValue?: string;
	clickPosition?: string;
	currentValue?: ArcWidgetSlot;
	icon?: ArcWidgetSlot;
	placeholder?: string;
	focusAction?: { autoFocus?: boolean; [key: string]: unknown };
	reset?: ArcWidgetSelectReset;
}

export interface ArcWidgetSelectProps extends ArcReactWidgetProps<ArcWidgetSelectData> {
	onChange?: (value: string | number | null) => void;
}
```