Reka UI logoReka
backdrop
PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

by
string | ((a: AcceptableValue, b: AcceptableValue) => boolean)

Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.

defaultValue
AcceptableValue | AcceptableValue[]

The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox

dir
'ltr' | 'rtl'

The reading direction of the listbox when applicable.
If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.

disabled
boolean

When true, prevents the user from interacting with listbox

highlightOnHover
boolean

When true, hover over item will trigger highlight

modelValue
AcceptableValue | AcceptableValue[]

The controlled value of the listbox. Can be binded with with v-model.

multiple
boolean

Whether multiple options can be selected or not.

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

orientation
'vertical'
'vertical' | 'horizontal'

The orientation of the listbox.
Mainly so arrow navigation is done accordingly (left & right vs. up & down)

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

selectionBehavior
'toggle'
'replace' | 'toggle'

How multiple selection should behave in the collection.

EmitPayload
entryFocus
[event: CustomEvent<any>]

Event handler called when container is being focused. Can be prevented.

highlight
[payload: { ref: HTMLElement; value: AcceptableValue; }]

Event handler when highlighted element changes.

leave
[event: Event]

Event handler called when the mouse leave the container

update:modelValue
[value: AcceptableValue]

Event handler called when the value changes.

Slots (default)Payload
modelValue
AcceptableValue | AcceptableValue[] | undefined

Current active value