Select

Desplegable nativo con el aspecto de Input y un chevron, para elegir una opción de una lista corta.

Cuándo usarlo

Props. label, options (strings o {value, label}), placeholder, value / onChange, hint, error, size, icon. Más de ~12 opciones o con búsqueda: no es este componente.

Ejemplos

Categoría

Props

Prop	Tipo	Por defecto	Descripción
`options`obligatoria	`SelectOption[]`	—	Lista corta (hasta ~12). Con más o con búsqueda, usa otro componente.
`placeholder`	`string`	—	Primera opción, no seleccionable, mientras no haya valor.
`size`	`"sm" · "md" · "lg"`	`md`	Alto: `sm` 36 · `md` 40 · `lg` 44.
`icon`	`IconName`	—	Icono inicial, 20px en `fg-quaternary`.
`label`	`ReactNode`	—	Etiqueta visible encima del campo. El placeholder nunca la sustituye.
`required`	`boolean`	—	Añade el asterisco tras la etiqueta (`text-brand-tertiary`, rojo con error).
`hint`	`ReactNode`	—	Pista bajo el campo. Con `error` de texto, la sustituye.
`error`	`string \| boolean`	—	Mensaje de error, o `true` para marcar el error sin texto.

Código

import { Select } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Select label="Categoría" placeholder="Elige una" options={["Casa", "Coche", "Ocio"]} />
		</>
	);
}

---
import { Select } from "@jotis-me/react";
---

<Select label="Categoría" placeholder="Elige una" options={["Casa", "Coche", "Ocio"]} />

Sin directiva funciona como campo nativo dentro de un <form>. Si necesitas onChange, ponlo en una isla .tsx con client:load.