ComboboxSelectedValue

Renders the current selectedValue state in the combobox store.

As a value component, it doesn't render any DOM elements and therefore doesn't accept HTML props. It can receive a fallback value or a function child to customize how the value is rendered.

Code examples

<ComboboxProvider>
  <ComboboxSelect>
    <ComboboxSelectedValue fallback="Select a fruit" />
  </ComboboxSelect>
  <ComboboxPopover>
    <ComboboxItem value="Apple" />
    <ComboboxItem value="Orange" />
  </ComboboxPopover>
</ComboboxProvider>
<ComboboxProvider>
  <ComboboxSelect>
    <ComboboxSelectedValue fallback="Select a fruit" />
  </ComboboxSelect>
  <ComboboxPopover>
    <ComboboxItem value="Apple" />
    <ComboboxItem value="Orange" />
  </ComboboxPopover>
</ComboboxProvider>

Optional Props

`children`

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

A function that gets called with the current selected value.

`fallback`

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

The value to use if the store's selectedValue state is empty.

`store`

ComboboxStore<T> | undefined
ComboboxStore<T> | undefined

Object returned by the useComboboxStore hook. If not provided, the closest ComboboxSelect or ComboboxProvider components' context will be used.

ComboboxSelectedValue

Code examples

Optional Props

children

fallback

store

Stay tuned

`children`

`fallback`

`store`