SelectValue

Renders the current value state in the select store.

As a value component, it doesn't render any DOM elements and therefore doesn't accept HTML props. It can optionally accept a fallback prop to use as a default value if the store's value is undefined.

Additionally, it takes a children function that gets called with the current value as an argument. This is handy for rendering the value in a custom way.

Code examples

<SelectProvider>
  <Select>
    <SelectValue fallback="Select a value" />
    <SelectArrow />
  </Select>
  <SelectPopover>
    <SelectItem value="Apple" />
    <SelectItem value="Banana" />
    <SelectItem value="Orange" />
  </SelectPopover>
</SelectProvider>
<SelectProvider>
  <Select>
    <SelectValue fallback="Select a value" />
    <SelectArrow />
  </Select>
  <SelectPopover>
    <SelectItem value="Apple" />
    <SelectItem value="Banana" />
    <SelectItem value="Orange" />
  </SelectPopover>
</SelectProvider>

function renderValue(value) {
  // render custom JSX
}

<SelectProvider>
  <Select>
    <SelectValue>{renderValue}</SelectValue>
    <SelectArrow />
  </Select>
  <SelectPopover>
    <SelectItem value="Apple" />
    <SelectItem value="Banana" />
    <SelectItem value="Orange" />
  </SelectPopover>
</SelectProvider>
function renderValue(value) {
  // render custom JSX
}

<SelectProvider>
  <Select>
    <SelectValue>{renderValue}</SelectValue>
    <SelectArrow />
  </Select>
  <SelectPopover>
    <SelectItem value="Apple" />
    <SelectItem value="Banana" />
    <SelectItem value="Orange" />
  </SelectPopover>
</SelectProvider>

Optional Props

`children`

((value: ToPrimitive<T>) => React.ReactNode) | undefined
((value: ToPrimitive<T>) => React.ReactNode) | undefined

A function that gets called with the current value as an argument. This is handy for rendering the value in a custom way.

`fallback`

T | undefined = ""
T | undefined = ""

The value to use as a default if the store's value is undefined.

`store`

SelectStore<T> | undefined
SelectStore<T> | undefined

Object returned by the useSelectStore hook. If not provided, the parent SelectList or SelectPopover components' context will be used.

SelectValue

Code examples

Optional Props

children

fallback

store

Stay tuned

`children`

`fallback`

`store`