Radius

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.

Default props of all <BaseListbox> can be set in your .app/app.config.ts.
Show code

Size

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 code

Contrast:default+

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 code

Contrast:muted

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 code

Contrast:muted+

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 code

Error

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.

This field is required
This field is required
This field is required
Show code

Disabled

Listboxes can be shown in a disabled state using the disabled prop.

Show code

Loading

Listboxes can be shown in a loading state using the loading prop.

Show code

Label:float

Listboxes can have a material design style floating label using the labelFloat prop.

Show code

Listbox items can have a sublabel using the sublabel prop of the properties object.

Show code

Listbox with icon

Listbox items can have an icon using the icon prop of the properties object.

Show code

Listbox with media

Listbox items can have a media using the media prop of the properties object.

Show code

Multiple selection

Listboxes can be used to select multiple items using the multiple prop.

Show code
This component has no props
value
The values to display in the component.
Show example
selected-icon
The icon to show when the component is selected.
Show example
active
Whether the item is focus/hover or not.
Show example
selected
Whether the item is selected or not.
Show example