API Reference@grafana/uiSelectCommonProps

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
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: Readonly<Array<SelectableValue<T>>>) => 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.
maxMenuHeight number
maxVisibleValues number
menuPlacement ‘auto’ | ‘bottom’ | ‘top’
menuPosition ‘fixed’ | ‘absolute’
menuShouldPortal boolean
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.
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;

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: Readonly<Array<SelectableValue<T>>>) => boolean;

maxMenuHeight property

Signature

maxMenuHeight?: number;

maxVisibleValues property

Signature

maxVisibleValues?: number;

Signature

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

Signature

menuPosition?: 'fixed' | 'absolute';

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;

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