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.

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
formatOptionLabel(item: SelectableValue<T>, formatOptionMeta: FormatOptionLabelMeta<T>) => React.ReactNode
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 false will prevent the menu from portalling to the body.
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.
onFocus() => void
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;

formatOptionLabel property

Signature

typescript
formatOptionLabel?: (item: SelectableValue<T>, formatOptionMeta: FormatOptionLabelMeta<T>) => React.ReactNode;

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 false will prevent the menu from portalling to the body.

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;

onFocus property

Signature

typescript
onFocus?: () => 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';