Select

Un Select di Radix — dropdown a valore singolo, SelectValue tronca un'etichetta scelta lunga invece di traboccare dal trigger. Per scegliere più valori, vedi MultiSelect.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
} from "@pompeitech/vesuvius-ui";

Raggruppato, con un separatore ed elementi disabilitati

Dimensioni

SelectTrigger segue la scala condivisa delle altezze: 28, 32, 36 e 40 px.

API

Select

Prop	Tipo	Default	Descrizione
`value` / `defaultValue`	`string`		Valore selezionato, controllato o non controllato.
`onValueChange`	`(value: string) => void`
`disabled`	`boolean`	`false`
`required`	`boolean`	`false`	Per la validazione nativa del form.
`name`	`string`		Per l'invio nativo del form senza JS.

SelectTrigger

Prop	Tipo	Default	Descrizione
`size`	`"xs" \| "sm" \| "default" \| "lg"`	`"default"`	Altezza del controllo: 28, 32, 36 o 40 px.

Più ogni prop nativa di <button>.

SelectValue

Prop	Tipo	Descrizione
`placeholder`	`ReactNode`	Mostrato quando nulla è selezionato.

Mostra l'etichetta dell'elemento selezionato altrimenti. Tronca invece di traboccare dal trigger, indipendentemente da quanto sia lunga l'etichetta.

SelectContent

Prop	Tipo	Default	Descrizione
`position`	`"popper" \| "item-aligned"`	`"popper"`	`"popper"` posiziona relativamente al trigger come un normale popover; `"item-aligned"` (il comportamento simile al `<select>` nativo) allinea l'elemento selezionato sopra il trigger invece.

Più ogni prop nativa di <div>; renderizzato in un Portal.

SelectGroup — ogni prop nativa di <div>; raggruppa elementi correlati per la semantica role="group".

SelectLabel — ogni prop nativa di <div>; intestazione non interattiva per un SelectGroup.

SelectItem

Prop	Tipo	Descrizione
`value`	`string`	Obbligatorio — il valore rappresentato da questo elemento.
`disabled`	`boolean`

SelectSeparator — ogni prop nativa di <div>; una sottile linea tra i gruppi.

Un equivalente completamente operabile da tastiera del <select> nativo: Spazio/Invio lo apre, ↑/↓ si sposta tra le opzioni, digitare salta a un elemento corrispondente, Esc chiude senza modificare la selezione. Dai sempre a SelectTrigger un nome accessibile — o id + un <Label htmlFor> (come nell'esempio controllato sopra) o aria-label quando non c'è un'etichetta visibile, come negli esempi precedenti.

Select

Select

Default

Controllato, con un'etichetta

Raggruppato, con un separatore ed elementi disabilitati

Dimensioni

API

Accessibilità