The listbox is a component that renders a list of items. It can be used to render a list of text, media or complex objects. The default shape is rounded.
Show codeHide code
The listbox is a component that renders a list of items. It can be used to render a list of text, media or complex objects. The default size is md.
Show codeHide code
The listbox can be rendered in different contrast modes. The default contrast mode is default. Contrast can affect the color of the text and the background of the element, as well as the light or the dark mode.
Show codeHide code
The listbox can be rendered in different contrast modes. Contrast can affect the color of the text and the background of the element, as well as the light or the dark mode.
Show codeHide code
The listbox can be rendered in different contrast modes. Contrast can affect the color of the text and the background of the element, as well as the light or the dark mode.
Show codeHide code
The listbox can be shown in an error state using the error prop. You can also set a custom error message using the same prop.
Show codeHide code
Listbox can be shown in a disabled state using the disabled prop.
Show codeHide code
Listbox can be shown in a loading state using the loading prop.
Show codeHide code
Listbox can have a material design style floating label using the labelFloat prop.
Show codeHide code
Listbox items can have a sublabel using the sublabel prop of the properties object.
Show codeHide code
Listbox items can have an icon using the icon prop of the properties object.
Show codeHide code
Listbox items can have a media using the media prop of the properties object.
Show codeHide code
Listbox can be used to select multiple items using the multiple prop.
Show codeHide code
itemsShow exampleHide example
classesShow exampleHide example
color-focusShow exampleHide example
disabledShow exampleHide example
errorShow exampleHide example
fixedShow exampleHide example
iconShow exampleHide example
labelShow exampleHide example
label-floatShow exampleHide example
loadingShow exampleHide example
multipleShow exampleHide example
multiple-labelShow exampleHide example
placeholderShow exampleHide example
propertiesShow exampleHide example
selected-iconShow exampleHide example
rounded@since
2.0.0
Show exampleHide example
placementShow exampleHide example
contrastShow exampleHide example
sizeShow exampleHide example
#labelShow exampleHide example
#iconShow exampleHide example
#listbox-buttonShow exampleHide example
#listbox-itemShow exampleHide example
activeShow exampleHide example
selectedShow exampleHide example
selected-iconShow exampleHide example
value