Menu

Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Documentationbreadcrumb arrow Grafana documentationbreadcrumb arrow API Referencebreadcrumb arrow @grafana/uibreadcrumb arrow SelectCommonProps
Enterprise Open source

SelectCommonProps interface

Signature

typescript 
export interface SelectCommonProps<T>

Import

typescript 
import { SelectCommonProps } from '@grafana/ui';

Properties

PropertyTypeDescription
“aria-label”stringAria label applied to the input field
allowCreateWhileLoadingboolean
allowCustomValueboolean
autoFocusbooleanFocus is set to the Select when rendered
backspaceRemovesValueboolean
classNamestring
closeMenuOnSelectboolean
componentsanyUsed for custom components. For more information, see react-select
defaultValueany
disabledboolean
filterOption(option: SelectableValue<T>, searchQuery: string) => boolean
formatCreateLabel(input: string) => stringFunction for formatting the text that is displayed when creating a new value
getOptionLabel(item: SelectableValue<T>) => React.ReactNode
getOptionValue(item: SelectableValue<T>) => string
idstringThe id to set on the SelectContainer component. To set the id for a label (with htmlFor),
inputIdstringThe id of the search input. Use this to set a matching label with htmlFor
inputValuestring
invalidboolean
isClearableboolean
isLoadingboolean
isMultiboolean
isOpenboolean
isOptionDisabled() => boolean
isSearchablebooleanDisables the possibility to type into the input
isValidNewOption(inputValue: string, value: SelectableValue<T> | null, options: OptionsOrGroups<unknown, GroupBase<unknown>>) => booleanallowCustomValue must be enabled. Determines whether the “create new” option should be displayed based on the current input value, select value and options array.
loadingMessagestringMessage to display isLoading=true
maxMenuHeightnumber
maxVisibleValuesnumber
menuPlacement‘auto’ | ‘bottom’ | ’top’
menuPosition‘fixed’ | ‘absolute’
menuShouldPortalbooleanSetting to true will portal the menu to document.body. This property will soon default to true and portalling will be the default behavior.
minMenuHeightnumber
noOptionsMessagestringThe message to display when no options could be found
onBlur() => void
onChange(value: SelectableValue<T>, actionMeta: ActionMeta) => {} | void
onCloseMenu() => void
onCreateOption(value: string) => voidallowCustomValue must be enabled. Function decides what to do with that custom value.
onInputChange(value: string, actionMeta: InputActionMeta) => void
onKeyDown(event: React.KeyboardEvent) => void
onOpenMenu() => void
openMenuOnFocusboolean
optionsArray<SelectableValue<T>>
placeholderstring
prefixJSX.Element | string | nullitem to be rendered in front of the input
renderControlControlComponent<T>Use a custom element to control Select. A proper ref to the renderControl is needed if ‘portal’ isn’t set to null
showAllSelectedWhenOpenboolean
tabSelectsValueboolean
valueSelectValue<T> | null
widthnumber | ‘auto’Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.

“aria-label” property

Aria label applied to the input field

Signature

typescript 
['aria-label']?: string;

allowCreateWhileLoading property

Signature

typescript 
allowCreateWhileLoading?: boolean;

allowCustomValue property

Signature

typescript 
allowCustomValue?: boolean;

autoFocus property

Focus is set to the Select when rendered

Signature

typescript 
autoFocus?: boolean;

backspaceRemovesValue property

Signature

typescript 
backspaceRemovesValue?: boolean;

className property

Signature

typescript 
className?: string;

closeMenuOnSelect property

Signature

typescript 
closeMenuOnSelect?: boolean;

components property

Used for custom components. For more information, see react-select

Signature

typescript 
components?: any;

defaultValue property

Signature

typescript 
defaultValue?: any;

disabled property

Signature

typescript 
disabled?: boolean;

filterOption property

Signature

typescript 
filterOption?: (option: SelectableValue<T>, searchQuery: string) => boolean;

formatCreateLabel property

Function for formatting the text that is displayed when creating a new value

Signature

typescript 
formatCreateLabel?: (input: string) => string;

getOptionLabel property

Signature

typescript 
getOptionLabel?: (item: SelectableValue<T>) => React.ReactNode;

getOptionValue property

Signature

typescript 
getOptionValue?: (item: SelectableValue<T>) => string;

id property

The id to set on the SelectContainer component. To set the id for a label (with htmlFor),

Signature

typescript 
id?: string;

inputId property

The id of the search input. Use this to set a matching label with htmlFor

Signature

typescript 
inputId?: string;

inputValue property

Signature

typescript 
inputValue?: string;

invalid property

Signature

typescript 
invalid?: boolean;

isClearable property

Signature

typescript 
isClearable?: boolean;

isLoading property

Signature

typescript 
isLoading?: boolean;

isMulti property

Signature

typescript 
isMulti?: boolean;

isOpen property

Signature

typescript 
isOpen?: boolean;

isOptionDisabled property

Signature

typescript 
isOptionDisabled?: () => boolean;

isSearchable property

Disables the possibility to type into the input

Signature

typescript 
isSearchable?: boolean;

isValidNewOption property

allowCustomValue must be enabled. Determines whether the “create new” option should be displayed based on the current input value, select value and options array.

Signature

typescript 
isValidNewOption?: (inputValue: string, value: SelectableValue<T> | null, options: OptionsOrGroups<unknown, GroupBase<unknown>>) => boolean;

loadingMessage property

Message to display isLoading=true

Signature

typescript 
loadingMessage?: string;

maxMenuHeight property

Signature

typescript 
maxMenuHeight?: number;

maxVisibleValues property

Signature

typescript 
maxVisibleValues?: number;

Signature

typescript 
menuPlacement?: 'auto' | 'bottom' | 'top';

Signature

typescript 
menuPosition?: 'fixed' | 'absolute';

Setting to true will portal the menu to document.body. This property will soon default to true and portalling will be the default behavior.

Signature

typescript 
menuShouldPortal?: boolean;

minMenuHeight property

Signature

typescript 
minMenuHeight?: number;

noOptionsMessage property

The message to display when no options could be found

Signature

typescript 
noOptionsMessage?: string;

onBlur property

Signature

typescript 
onBlur?: () => void;

onChange property

Signature

typescript 
onChange: (value: SelectableValue<T>, actionMeta: ActionMeta) => {} | void;

onCloseMenu property

Signature

typescript 
onCloseMenu?: () => void;

onCreateOption property

allowCustomValue must be enabled. Function decides what to do with that custom value.

Signature

typescript 
onCreateOption?: (value: string) => void;

onInputChange property

Signature

typescript 
onInputChange?: (value: string, actionMeta: InputActionMeta) => void;

onKeyDown property

Signature

typescript 
onKeyDown?: (event: React.KeyboardEvent) => void;

onOpenMenu property

Signature

typescript 
onOpenMenu?: () => void;

openMenuOnFocus property

Signature

typescript 
openMenuOnFocus?: boolean;

options property

Signature

typescript 
options?: Array<SelectableValue<T>>;

placeholder property

Signature

typescript 
placeholder?: string;

prefix property

item to be rendered in front of the input

Signature

typescript 
prefix?: JSX.Element | string | null;

renderControl property

Use a custom element to control Select. A proper ref to the renderControl is needed if ‘portal’ isn’t set to null

Signature

typescript 
renderControl?: ControlComponent<T>;

showAllSelectedWhenOpen property

Signature

typescript 
showAllSelectedWhenOpen?: boolean;

tabSelectsValue property

Signature

typescript 
tabSelectsValue?: boolean;

value property

Signature

typescript 
value?: SelectValue<T> | null;

width property

Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.

Signature

typescript 
width?: number | 'auto';