BetaPublic beta — Read the release notes
Documentation

Combobox

Text input with autocomplete dropdown.

Package
@solidiom/combobox
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

ComboboxContentPropsinterface

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

Props

class?
string
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

ComboboxInputPropsinterface

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

Props

class?
string
onFilter?
(value: string) => void — Called on each input change to trigger filtering.
placeholder?
string — Placeholder text when empty.
ref?
(el: HTMLInputElement) => void
style?
string | CSSProperties

View source

ComboboxItemPropsinterface

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

Props

disabled?
boolean — Disabled state.
textValue?
string — Text value for matching. Defaults to value.
value
string — Unique value for this item.

children: Element

View source

ComboboxItemTextPropsinterface

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

children: Element

View source

ComboboxRootPropsinterface

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

Props

class?
string
defaultInputValue?
string
defaultOpen?
boolean
defaultSelectedValue?
string
inputValue?
Accessor<string> — Controlled input text value.
onInputValueChange?
(value: string) => void
onOpenChange?
(open: boolean, details: ChangeDetails<DisclosureReason>) => void
onSelectedValueChange?
(value: string, details: ChangeDetails<ComboboxReason>) => void
open?
Accessor<boolean> — Controlled open state.
selectedValue?
Accessor<string | undefined> — Controlled selected value.

children: Element

View source

Contentcomponent

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

                        Content(props: ComboboxContentProps): Element
                      

Props

class?
string
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

Inputcomponent

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

                        Input(props: ComboboxInputProps): Element
                      

Props

class?
string
onFilter?
(value: string) => void — Called on each input change to trigger filtering.
placeholder?
string — Placeholder text when empty.
ref?
(el: HTMLInputElement) => void
style?
string | CSSProperties

View source

Itemcomponent

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

                        Item(props: ComboboxItemProps): Element
                      

Props

disabled?
boolean — Disabled state.
textValue?
string — Text value for matching. Defaults to value.
value
string — Unique value for this item.

children: Element

View source

ItemTextcomponent

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

                        ItemText(props: ComboboxItemTextProps): Element
                      

children: Element

View source

Rootcomponent

@solidiom/combobox — Headless autocomplete combobox primitive. Parts: Root, Input, Content, Item, ItemText.

                        Root(props: ComboboxRootProps): Element
                      

Props

class?
string
defaultInputValue?
string
defaultOpen?
boolean
defaultSelectedValue?
string
inputValue?
Accessor<string> — Controlled input text value.
onInputValueChange?
(value: string) => void
onOpenChange?
(open: boolean, details: ChangeDetails<DisclosureReason>) => void
onSelectedValueChange?
(value: string, details: ChangeDetails<ComboboxReason>) => void
open?
Accessor<boolean> — Controlled open state.
selectedValue?
Accessor<string | undefined> — Controlled selected value.

children: Element

View source