Componentes · Ola 1 · Formularios

Select

Elige una opción de una lista corta, con el selector nativo del sistema. Tiene el mismo aspecto de línea que Input y un chevron; las opciones van como children. Dentro de un Field toma de él su etiqueta, su descripción y sus estados.

import { Select } from '@archeblack/ui';

Ejemplos

Dentro de un Field

Opciones como children y el valor con bind:value.

Región

Svelte

<script lang="ts">
	import { Field, Select } from '@archeblack/ui';

	let region = $state('sa');
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Región">
		<Select bind:value={region}>
			<option value="sa">Sudamérica (São Paulo)</option>
			<option value="us">EE. UU. Este (Virginia)</option>
			<option value="eu">Europa (Irlanda)</option>
		</Select>
	</Field>
</div>

Placeholder

Mientras no hay opción elegida se ve un texto sutil que no se puede volver a elegir.

Plan

Puedes cambiarlo cuando quieras.

Svelte

<script lang="ts">
	import { Field, Select } from '@archeblack/ui';

	// Vacío: se ve el placeholder hasta que la persona elige.
	let plan = $state('');
</script>

<div style:width="min(100%, 20rem)">
	<Field label="Plan" hint="Puedes cambiarlo cuando quieras." required>
		<Select bind:value={plan} placeholder="Elige un plan">
			<option value="free">Gratis</option>
			<option value="studio">Estudio</option>
			<option value="team">Equipo</option>
		</Select>
	</Field>
</div>

Grupos y suelto

<optgroup> agrupa las opciones. Sin Field, el nombre va en aria-label.

Svelte

<script lang="ts">
	import { Select } from '@archeblack/ui';

	let zone = $state('America/Buenos_Aires');
</script>

<!-- Suelto, sin Field: el nombre va en aria-label. Las opciones se agrupan con optgroup. -->
<div style:width="min(100%, 20rem)">
	<Select bind:value={zone} aria-label="Zona horaria">
		<optgroup label="América">
			<option value="America/Buenos_Aires">Buenos Aires</option>
			<option value="America/Mexico_City">Ciudad de México</option>
			<option value="America/New_York">Nueva York</option>
		</optgroup>
		<optgroup label="Europa">
			<option value="Europe/Madrid">Madrid</option>
			<option value="Europe/London">Londres</option>
		</optgroup>
	</Select>
</div>

Tallas

sm, md y lg, por alto. El chevron mide 16 px en sm y md, y 20 px en lg, como el ícono de Input.

Svelte

<script lang="ts">
	import { Select } from '@archeblack/ui';
</script>

<div style:display="grid" style:gap="var(--arche-spacing-6)" style:width="min(100%, 20rem)">
	<Select size="sm" aria-label="Talla sm">
		<option>Talla sm, 28 px</option>
	</Select>
	<Select aria-label="Talla md">
		<option>Talla md, 36 px</option>
	</Select>
	<Select size="lg" aria-label="Talla lg">
		<option>Talla lg, 44 px</option>
	</Select>
</div>

Estados

Inválido, con el mensaje del Field, y deshabilitado.

Región

Elige dónde se alojan los datos.

Moneda

Se fija al crear la cuenta.

Svelte

<script lang="ts">
	import { Field, Select } from '@archeblack/ui';

	let region = $state('');
</script>

<div style:display="grid" style:gap="var(--arche-spacing-6)" style:width="min(100%, 20rem)">
	<Field label="Región" error="Elige dónde se alojan los datos.">
		<Select bind:value={region} placeholder="Elige una región">
			<option value="sa">Sudamérica (São Paulo)</option>
			<option value="eu">Europa (Irlanda)</option>
		</Select>
	</Field>
	<Field label="Moneda" hint="Se fija al crear la cuenta." disabled>
		<Select value="ars">
			<option value="ars">Peso argentino (ARS)</option>
		</Select>
	</Field>
</div>

Props

Props de Select
Prop	Descripción
`bind:value?` `unknown`	Valor de la opción elegida. Sin valor, el select elige la primera opción, como el nativo.
`children?` `Snippet`	Las opciones: elementos `<option>` y `<optgroup>`.
`placeholder?` `string`	Texto mientras no hay opción elegida: una primera opción deshabilitada con valor `''`. Si `value` no está definido, al crearse o después (cuando el producto limpia el formulario con `value = undefined`), pasa a `''` y vuelve el placeholder.
`size?` `'sm' \| 'md' \| 'lg'` Por defecto `'md'`	Talla por alto: `sm` 28 px (texto de 13 px), `md` 36 px y `lg` 44 px. Los mismos altos que Input y Button. El chevron mide 16 px en `sm` y `md`, y 20 px en `lg`.
`invalid?` `boolean` Por defecto `false`	Marca el valor como inválido (`aria-invalid`). Dentro de un Field lo decide su `error`.
`bind:ref?` `HTMLSelectElement \| null`	El `<select>`, para enfocarlo desde el código.
`class?` `ClassValue`	Clases del producto; se suman a `arche-select`, el contenedor del select y el chevron.
`...rest` `HTMLSelectAttributes`	Cualquier otro atributo va al `<select>`: `name`, `autocomplete`, `required`, `disabled`, `onchange`… Sin `multiple`: una lista de varias opciones no es un campo de línea.

Accesibilidad

Es un <select> nativo: en el móvil abre el selector del sistema y con el teclado se recorre con las flechas o escribiendo la primera letra.
Necesita un nombre: dentro de un Field lo da la etiqueta; suelto, aria-label, aria-labelledby o un <label for> propio. En desarrollo, un Select suelto sin nombre avisa por consola.
El chevron es decorativo y no recibe clics: el clic llega al select.
El placeholder es una opción deshabilitada: no se puede volver a elegir y, con required, el formulario no se envía mientras esté elegido.
Con required y placeholder, Chrome expone el select como inválido desde que carga la página: el valor '' no cumple required y el navegador pasa esa validez nativa al árbol de accesibilidad, aunque la persona todavía no lo haya tocado. Algunos lectores dicen «inválido» al llegar. Arche no lo cambia, porque es el comportamiento nativo y es el que bloquea el envío. La señal de Arche es otra: la línea de peligro, aria-invalid y el mensaje salen del error del Field, y el producto lo pone al enviar (el formulario de la página de Field usa novalidate y muestra los errores después del primer envío).
La línea llega a 3:1 contra toda capa. El foco la enciende con un clic o con el teclado; en colores forzados, la engrosa. Inválido y con foco, la línea toma el color de foco y el halo es de peligro.
Deshabilitado, la línea es punteada: se ve, pero no se confunde con la línea sólida de un select que se puede usar.
La lista desplegada la dibuja el sistema, en oscuro (color-scheme: dark).

Qué evitar

Un Select con dos o tres opciones que conviene ver de un vistazo. Un grupo de Radio o un Segmented: todas las opciones a la vista.
Un Select con decenas de opciones o que necesita búsqueda. Un Combobox: filtra las opciones mientras se escribe.
Una opción vacía que se puede elegir como si fuera un valor. placeholder: queda deshabilitada y el texto se ve sutil.
Opciones que cambian la página al elegirse, sin botón. Aplica el cambio con un botón, o avisa de antemano: quien usa el teclado recorre las opciones una por una.