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.
SelectCommonProps interface
Signature
export interface SelectCommonProps<T>
Import
import { SelectCommonProps } from '@grafana/ui';
Properties
Property | Type | Description |
---|---|---|
“aria-label” | string | Aria label applied to the input field |
allowCreateWhileLoading | boolean | |
allowCustomValue | boolean | |
autoFocus | boolean | Focus is set to the Select when rendered |
backspaceRemovesValue | boolean | |
className | string | |
closeMenuOnSelect | boolean | |
components | any | Used for custom components. For more information, see react-select |
defaultValue | any | |
disabled | boolean | |
filterOption | (option: SelectableValue<T>, searchQuery: string) => boolean | |
formatCreateLabel | (input: string) => string | Function 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 | |
id | string | The id to set on the SelectContainer component. To set the id for a label (with htmlFor), |
inputId | string | The id of the search input. Use this to set a matching label with htmlFor |
inputValue | string | |
invalid | boolean | |
isClearable | boolean | |
isLoading | boolean | |
isMulti | boolean | |
isOpen | boolean | |
isOptionDisabled | () => boolean | |
isSearchable | boolean | Disables the possibility to type into the input |
isValidNewOption | (inputValue: string, value: SelectableValue<T> | null, options: OptionsOrGroups<unknown, GroupBase<unknown>>) => boolean | allowCustomValue must be enabled. Determines whether the “create new” option should be displayed based on the current input value, select value and options array. |
loadingMessage | string | Message to display isLoading=true |
maxMenuHeight | number | |
maxVisibleValues | number | |
menuPlacement | ‘auto’ | ‘bottom’ | ’top’ | |
menuPosition | ‘fixed’ | ‘absolute’ | |
menuShouldPortal | boolean | Setting to false will prevent the menu from portalling to the body. |
minMenuHeight | number | |
noOptionsMessage | string | The message to display when no options could be found |
onBlur | () => void | |
onChange | (value: SelectableValue<T>, actionMeta: ActionMeta) => {} | void | |
onCloseMenu | () => void | |
onCreateOption | (value: string) => void | allowCustomValue 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 | |
openMenuOnFocus | boolean | |
options | Array<SelectableValue<T>> | |
placeholder | string | |
prefix | JSX.Element | string | null | item to be rendered in front of the input |
renderControl | ControlComponent<T> | Use a custom element to control Select. A proper ref to the renderControl is needed if ‘portal’ isn’t set to null |
showAllSelectedWhenOpen | boolean | |
tabSelectsValue | boolean | |
value | SelectValue<T> | null | |
width | number | ‘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
['aria-label']?: string;
allowCreateWhileLoading property
Signature
allowCreateWhileLoading?: boolean;
allowCustomValue property
Signature
allowCustomValue?: boolean;
autoFocus property
Focus is set to the Select when rendered
Signature
autoFocus?: boolean;
backspaceRemovesValue property
Signature
backspaceRemovesValue?: boolean;
className property
Signature
className?: string;
closeMenuOnSelect property
Signature
closeMenuOnSelect?: boolean;
components property
Used for custom components. For more information, see react-select
Signature
components?: any;
defaultValue property
Signature
defaultValue?: any;
disabled property
Signature
disabled?: boolean;
filterOption property
Signature
filterOption?: (option: SelectableValue<T>, searchQuery: string) => boolean;
formatCreateLabel property
Function for formatting the text that is displayed when creating a new value
Signature
formatCreateLabel?: (input: string) => string;
formatOptionLabel property
Signature
formatOptionLabel?: (item: SelectableValue<T>, formatOptionMeta: FormatOptionLabelMeta<T>) => React.ReactNode;
getOptionLabel property
Signature
getOptionLabel?: (item: SelectableValue<T>) => React.ReactNode;
getOptionValue property
Signature
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
id?: string;
inputId property
The id of the search input. Use this to set a matching label with htmlFor
Signature
inputId?: string;
inputValue property
Signature
inputValue?: string;
invalid property
Signature
invalid?: boolean;
isClearable property
Signature
isClearable?: boolean;
isLoading property
Signature
isLoading?: boolean;
isMulti property
Signature
isMulti?: boolean;
isOpen property
Signature
isOpen?: boolean;
isOptionDisabled property
Signature
isOptionDisabled?: () => boolean;
isSearchable property
Disables the possibility to type into the input
Signature
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
isValidNewOption?: (inputValue: string, value: SelectableValue<T> | null, options: OptionsOrGroups<unknown, GroupBase<unknown>>) => boolean;
loadingMessage property
Message to display isLoading=true
Signature
loadingMessage?: string;
maxMenuHeight property
Signature
maxMenuHeight?: number;
maxVisibleValues property
Signature
maxVisibleValues?: number;
menuPlacement property
Signature
menuPlacement?: 'auto' | 'bottom' | 'top';
menuPosition property
Signature
menuPosition?: 'fixed' | 'absolute';
menuShouldPortal property
Setting to false will prevent the menu from portalling to the body.
Signature
menuShouldPortal?: boolean;
minMenuHeight property
Signature
minMenuHeight?: number;
noOptionsMessage property
The message to display when no options could be found
Signature
noOptionsMessage?: string;
onBlur property
Signature
onBlur?: () => void;
onChange property
Signature
onChange: (value: SelectableValue<T>, actionMeta: ActionMeta) => {} | void;
onCloseMenu property
Signature
onCloseMenu?: () => void;
onCreateOption property
allowCustomValue must be enabled. Function decides what to do with that custom value.
Signature
onCreateOption?: (value: string) => void;
onFocus property
Signature
onFocus?: () => void;
onInputChange property
Signature
onInputChange?: (value: string, actionMeta: InputActionMeta) => void;
onKeyDown property
Signature
onKeyDown?: (event: React.KeyboardEvent) => void;
onOpenMenu property
Signature
onOpenMenu?: () => void;
openMenuOnFocus property
Signature
openMenuOnFocus?: boolean;
options property
Signature
options?: Array<SelectableValue<T>>;
placeholder property
Signature
placeholder?: string;
prefix property
item to be rendered in front of the input
Signature
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
renderControl?: ControlComponent<T>;
showAllSelectedWhenOpen property
Signature
showAllSelectedWhenOpen?: boolean;
tabSelectsValue property
Signature
tabSelectsValue?: boolean;
value property
Signature
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
width?: number | 'auto';