Select

export function SelectSimple() {
  const [eventType, setEventType] = useState<EventTypeId>('boda')

  return (
    <>
      <Select<EventTypeId>
        label="Tipo de evento"
        value={eventType}
        options={EVENT_TYPE_OPTIONS}
        onChange={(o) => setEventType(o.id)}
      />
    </>
  )
}

De specimens/input.tsx · SelectSimple: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

export function SelectClearable() {
  const [dock, setDock] = useState('')

  return (
    <>
      <Select
        label="Muelle de zarpe"
        value={dock}
        options={DOCK_OPTIONS}
        onChange={(o) => setDock(String(o.id))}
        placeholder="Elegí un muelle"
        clearable
        onClear={() => setDock('')}
      />
    </>
  )
}

De specimens/input.tsx · SelectClearable: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

export function SelectDeshabilitado() {
  return (
    <>
      <Select
        label="Salón"
        value=""
        options={SALON_OPTIONS}
        onChange={() => {}}
        disabled
        placeholder="Sin salones disponibles"
      />
    </>
  )
}

De specimens/input.tsx · SelectDeshabilitado: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

export function SelectError() {
  return (
    <>
      <Select
        label="Categoría del combo"
        value=""
        options={FLAVOR_CATEGORY_OPTIONS}
        onChange={() => {}}
        error="Elegí una categoría antes de publicar el combo"
      />
    </>
  )
}

De specimens/input.tsx · SelectError: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

export function SelectCompositionMatrix() {
  const [flavor, setFlavor] = useState('dulce-de-leche')

  return (
    <Stage label="SelectRoot · composición, agrupada, sin prop de error" tall wide>
      <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
        <SelectRoot value={flavor} onValueChange={setFlavor}>
          <SelectTrigger>
            <SelectValue placeholder="Elegí un sabor" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Clásicos</SelectLabel>
              <SelectItem value="dulce-de-leche">Dulce de leche</SelectItem>
              <SelectItem value="chocolate">Chocolate amargo</SelectItem>
            </SelectGroup>
            <SelectSeparator />
            <SelectGroup>
              <SelectLabel>De estación</SelectLabel>
              <SelectItem value="frutilla">Frutilla</SelectItem>
              <SelectItem value="mango" disabled>
                Mango (sin stock)
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </SelectRoot>
        <SelectRoot value="" onValueChange={() => {}} disabled>
          <SelectTrigger>
            <SelectValue placeholder="Franquicia cerrada temporalmente" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="a">—</SelectItem>
          </SelectContent>
        </SelectRoot>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · SelectCompositionMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.