Components

Listbox

Listboxes allow a user to select a value or multiple values from a custom-styled dropdown.

Pro tip
Listboxes should only be used when multiselect or custom styles are needed. If you can get by with using the browser styles provided by the component, you should use it first.

While Listbox is similar to the component, they differ in that listboxes represent a selection by the user. Items in a listbox do not have their own individual actions. You can use the ListboxButton component to easily present a listbox in a popout with a button that matches the appearance of our component.

import { Listbox, ListboxButton, useSelect } from '@sproutsocial/racine'

Properties

NameTypeDefaultDescriptionRequired?
childrenReact.Node
value?string | string[]Any item(s) matching this value will be rendered in a selected state
onChange(event) => ()Called whenever a new value is selected.
innerRefReact.RefUsed if you need to compose Listbox with Downshift
multiselectbooleanfalseWhether or not the listbox should allow multiple selections

Subcomponents

Listbox group

Groups are used to provide default padding and spacing around items, and can optionally render a visual label for a group of items.

Fruit
NameTypeDefaultDescriptionRequired?
childrenReact.Node
titleReact.RefIf provided, a group header will be rendered in the listbox
appearancedefault, flushdefaultUse the flush appearance if you’re using the listbox group with a title outside of a popout
disabledbooleanfalseIf all of the items in a group are disabled, the group title should also be disabled

Listbox item

Represents a unique value within a listbox. Selected items are indicated with a check icon and text.

NameTypeDefaultDescriptionRequired?
childrenReact.Node
disabledbooleanfalse
valuestring
elemBeforeReact.NodeA component to be rendered before the children of the menu item
elemAfterReact.NodeA component to be rendered after the children of the menu item

Listbox checkbox

A listbox item with a visible representing a selection.

Listbox radio

A listbox item with a visible representing a selection.

Listbox filter input

A special version of that can be used to allow the user to filter items within a listbox.

Listbox divider

A horizontal line with the “separator” role. Accepts the same props as

Recipes

Changing the listbox button size

ListboxButton offers a small and large size for matching the size of other elements in a form. The following example shows the small size:

Multiselect

Groups