ComboboxItemValue
Renders a span element with the combobox item value as children. The value
is split into span elements. Portions of the value matching the user input
will have a
data-user-value
attribute, while the rest will have a
data-autocomplete-value
attribute.
The item value is automatically set to the value of the closest
ComboboxItem component's
value prop. The user
input value is automatically set to the combobox store's
value state. Both
values can be overridden by providing the
value and
userValue
props, respectively.
Code examples
// The Apple item will have a value element that looks like this:
<span>
<span data-autocomplete-value>A</span>
<span data-user-value>p</span>
<span data-user-value>p</span>
<span data-autocomplete-value>le</span>
</span>
Optional Props
render
RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined
Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
Check out the Composition guide for more details.
store
ComboboxStore<ComboboxStoreSelectedValue> | undefined
Object returned by the
useComboboxStore
hook. If not provided, the closest
ComboboxList or
ComboboxPopover
components' context will be used.
userValue
string | string[] | undefined
The current user input value. If not provided, the combobox store's
value state
will be used.
This is the value used to highlight the matching portions of the item value. It can be customized to highlight different portions.
value
string | undefined
The current combobox item value. If not provided, the parent
ComboboxItem component's
value prop will be
used.
This is the value rendered by the component. It can be customized to display different children.