SelectCommonProps interface

Signature

export interface SelectCommonProps<T>

Import

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

Properties

“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';