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>

Required Props

`fallback`

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

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

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.

`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

Required Props

fallback

Optional Props

children

store

Stay tuned

`fallback`

`children`

`store`