SelectMenu#

The <SelectMenu> component is made up of two elements: a disclosure (triggerable button), and a popover list of options.

Import#

import { SelectMenu } from 'bumbag'

Usage#

Editable example

Labels#

Select a fruit...
Select a fruit...
Editable example

If you want to have the label contained within the bounds of the select menu field, supply the containLabel prop:

Select a fruit...
Editable example

Fields#

You can also use the <SelectMenuField> component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.

It accepts a combination of SelectMenu props and FieldWrapper props.

Editable example

Sizes#

Editable example

Disabled#

Editable example

Disabled options#

Editable example

Search#

Editable example

Multi-select#

Editable example

With tags#

Editable example

Loading indicator#

Editable example

Option icons#

Editable example

Fetching data (async)#

Editable example

Pagination#

Editable example

Deferred#

Editable example

Custom disclosure#

Editable example

Custom option component#

Editable example

Custom empty text#

Editable example

Custom empty component#

Editable example
Editable example

Custom top actions component#

Editable example

Custom bottom actions component#

Editable example

Accessibility#

Patterns#

  • SelectMenu has a role of combobox.
  • The SelectMenu trigger button has a role of button.
  • The trigger button has aria-expanded set to true/false depending on the visibility of the popover listbox.
  • The trigger button has aria-haspopup set to listbox.
  • The trigger button has it's aria-controls value set to the ID of the popover listbox.
  • The SelectMenu popover has a role of listbox.
  • Pressing Enter or Space on the trigger button will trigger the popover listbox.
  • If the menu is open, pressing Esc will close the listbox.
  • If the menu is open, clicking outside the menu bounds will close the listbox.
  • If the menu is open, pressing or will navigate the menu items.

Props#

SelectMenu Props#

cacheKey string

The key to cache the loadOptions results against.

containLabel boolean

If the label prop is supplied, is it contained inside the select?

defer boolean

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

disabled boolean

Indicates if the Autosuggest is disabled.

disableClear boolean

Indicates if the clear button should be disabled.

hasSearch boolean

Indicates if the select menu has a search component.

hasTags boolean

Indicates if the select menu should have tags of the selected options.

isDropdown boolean

Indicates if the select menu is a dropdown menu. Default: true

isLoading boolean

Indicates if the select menu is loading.

isMultiSelect boolean

Indicates if multiple options should be selected.

label string

limit number

Applies a limit to the number of options that appear in the list.

loadOptions

(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>

Supply an async function to loadOptions to load options from an external data source.

loadVariables { [key: string]: any; }

Supply variables (i.e. query parameters) to the loadOptions function.

options Option[]

Options to show in the list. If loadOptions is supplied, then you don't need to supply this.

onChange Required

(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void

Function to invoke when the option has been changed.

pagination boolean

Indicates if the list should be paginated. If true, then pagination will be applied to loadOptions.

popoverHeight string

Sets the height of the popover list.

placeholder string

Sets the placeholder of the search input.

size

"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"

Sets the size of the select menu button

state string

Sets the visual state of the Autosuggest.

value { key?: ReactText; label?: string; value?: any; } Required

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. { key: 1, label: 'Jake', value: 'legend' }).

errorText string

emptyText string

loadingText string

loadingMoreText string

renderBottomActions any

renderDisclosure any

renderError any

renderEmpty any

renderLoading any

renderLoadingMore any

renderOption any

renderTopActions any

buttonProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 807 more ...;
  ignoreGrayOverride?: boolean;
}

itemProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 816 more ...;
  isTabbable?: boolean;
}

popoverProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 817 more ...;
  isTabbable?: boolean;
}

searchInputProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 809 more ...;
  onFocus?: (event: FocusEvent<...>) => void;
}

tagProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 787 more ...;
  size?: Flexible<...>;
}

dropdownMenuInitialState

{
  baseId?: string;
  unstable_virtual?: boolean;
  currentId?: string;
  orientation?: Orientation;
  wrap?: boolean | "horizontal" | "vertical";
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  ... 11 more ...;
  unstable_preventOverflow?: boolean;
}
Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

SelectMenuField Props#

addonBefore

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Addon component to the input (before). Similar to the addon components in Input.

addonAfter

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Addon component to the input (after). Similar to the addon components in Input.

selectMenuProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 821 more ...;
  dropdownMenuInitialState?: Partial<...>;
}

Additional props for the SelectMenu component

orientation "horizontal" | "vertical"

If addonBefore or addonAfter exists, then the addons will render vertically.

Inherits SelectMenu props

cacheKey string

The key to cache the loadOptions results against.

containLabel boolean

If the label prop is supplied, is it contained inside the select?

defer boolean

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

disabled boolean

Indicates if the Autosuggest is disabled.

disableClear boolean

Indicates if the clear button should be disabled.

hasSearch boolean

Indicates if the select menu has a search component.

hasTags boolean

Indicates if the select menu should have tags of the selected options.

isDropdown boolean

Indicates if the select menu is a dropdown menu. Default: true

isLoading boolean

Indicates if the select menu is loading.

isMultiSelect boolean

Indicates if multiple options should be selected.

label string

limit number

Applies a limit to the number of options that appear in the list.

loadOptions

(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>

Supply an async function to loadOptions to load options from an external data source.

loadVariables { [key: string]: any; }

Supply variables (i.e. query parameters) to the loadOptions function.

options Option[]

Options to show in the list. If loadOptions is supplied, then you don't need to supply this.

onChange Required

(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void

Function to invoke when the option has been changed.

pagination boolean

Indicates if the list should be paginated. If true, then pagination will be applied to loadOptions.

popoverHeight string

Sets the height of the popover list.

placeholder string

Sets the placeholder of the search input.

size

"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"

Sets the size of the select menu button

state string

Sets the visual state of the Autosuggest.

value { key?: ReactText; label?: string; value?: any; } Required

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. { key: 1, label: 'Jake', value: 'legend' }).

errorText string

emptyText string

loadingText string

loadingMoreText string

renderBottomActions any

renderDisclosure any

renderError any

renderEmpty any

renderLoading any

renderLoadingMore any

renderOption any

renderTopActions any

buttonProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 807 more ...;
  ignoreGrayOverride?: boolean;
}

itemProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 816 more ...;
  isTabbable?: boolean;
}

popoverProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 817 more ...;
  isTabbable?: boolean;
}

searchInputProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 809 more ...;
  onFocus?: (event: FocusEvent<...>) => void;
}

tagProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 787 more ...;
  size?: Flexible<...>;
}

dropdownMenuInitialState

{
  baseId?: string;
  unstable_virtual?: boolean;
  currentId?: string;
  orientation?: Orientation;
  wrap?: boolean | "horizontal" | "vertical";
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  ... 11 more ...;
  unstable_preventOverflow?: boolean;
}
Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Inherits FieldWrapper props

description

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the description text of the field wrapper.

hint

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the bottom hint text of the field wrapper.

isOptional boolean

Sets the optional flag (and displays optional text) on the field wrapper.

isRequired boolean

Sets the required flag (and a required astrix) on the field wrapper.

labelType "label" | "legend"

Sets the label type on the field wrapper.

tooltip

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

tooltipTriggerComponent

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip trigger component.

validationText string

Sets the bottom validation text of the field wrapper.

Theming#

SelectMenu.styles.base
SelectMenu.Button.styles.base
SelectMenu.ButtonText.styles.base
SelectMenu.ButtonIconsWrapper.styles.base
SelectMenu.ButtonIcon.styles.base
SelectMenu.Popover.styles.base
SelectMenu.Item.styles.base
SelectMenu.ItemText.styles.base
SelectMenu.SearchInputWrapper.styles.base
SelectMenu.SearchInput.styles.base
SelectMenu.StaticItem.styles.base
Copyright © 2021 Jake Moxey