componente · @solu30/ui-kit/input

SelectValue

Displays the currently selected value. Shows placeholder when value is empty. When no children mapper is provided, auto-reflects the label registered by the matching SelectItem (via the registry in SelectRoot). Falls back to raw value, then placeholder.

161 sitios de import en 6 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
elliot
gestorsalon
raquetea

La parte, adentro de su padre

Cargando el espécimen…

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.

SelectValue es una parte de SelectRoot: sola no significa nada. Así que el escenario monta el padre completo, y lo que se ve incluye más piezas que la de esta ficha.

Cómo se usa

import { SelectValue } from '@solu30/ui-kit/input'

Props

2 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
placeholder	opcional	`string`	Placeholder text when no value is selected
children	opcional	`(value: string) => ReactNode`	Custom render function for the selected value

Ejemplo del paquete

// Muestra el valor elegido, o el placeholder si no hay ninguno.
<SelectValue placeholder="Elegí uno" />

// Con children se decide cómo se dibuja el valor.
<SelectValue>{(v) => <Badge>{v}</Badge>}</SelectValue>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.