+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "Cascader"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
+++

## Cascader class

<b>Signature</b>

```typescript
export declare class Cascader extends React.PureComponent<CascaderProps, CascaderState> 
```
<b>Import</b>

```typescript
import { Cascader } from '@grafana/ui';
```
<b>Constructors</b>

|  Constructor | Modifiers | Description |
|  --- | --- | --- |
|  [constructor(props)](#constructor-props) |  | Constructs a new instance of the <code>Cascader</code> class |

<b>Properties</b>

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [flattenOptions](#flattenoptions-property) |  | <code>(options: CascaderOption[], optionPath?: CascaderOption[]) =&gt; SelectableValue&lt;string[]&gt;[]</code> |  |
|  [onBlur](#onblur-property) |  | <code>() =&gt; void</code> |  |
|  [onBlurCascade](#onblurcascade-property) |  | <code>() =&gt; void</code> |  |
|  [onChange](#onchange-property) |  | <code>(value: string[], selectedOptions: CascaderOption[]) =&gt; void</code> |  |
|  [onCreateOption](#oncreateoption-property) |  | <code>(value: string) =&gt; void</code> |  |
|  [onInputKeyDown](#oninputkeydown-property) |  | <code>(e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; void</code> |  |
|  [onSelect](#onselect-property) |  | <code>(obj: SelectableValue&lt;string[]&gt;) =&gt; void</code> |  |

<b>Methods</b>

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [render()](#render-method) |  |  |
|  [setInitialValue(searchableOptions, initValue)](#setinitialvalue-method) |  |  |

### constructor(props)

Constructs a new instance of the `Cascader` class

<b>Signature</b>

```typescript
constructor(props: CascaderProps);
```
<b>Parameters</b>

|  Parameter | Type | Description |
|  --- | --- | --- |
|  props | <code>CascaderProps</code> |  |

### flattenOptions property

<b>Signature</b>

```typescript
flattenOptions: (options: CascaderOption[], optionPath?: CascaderOption[]) => SelectableValue<string[]>[];
```

### onBlur property

<b>Signature</b>

```typescript
onBlur: () => void;
```

### onBlurCascade property

<b>Signature</b>

```typescript
onBlurCascade: () => void;
```

### onChange property

<b>Signature</b>

```typescript
onChange: (value: string[], selectedOptions: CascaderOption[]) => void;
```

### onCreateOption property

<b>Signature</b>

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

### onInputKeyDown property

<b>Signature</b>

```typescript
onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
```

### onSelect property

<b>Signature</b>

```typescript
onSelect: (obj: SelectableValue<string[]>) => void;
```

### render method

<b>Signature</b>

```typescript
render(): JSX.Element;
```
<b>Returns:</b>

`JSX.Element`

### setInitialValue method

<b>Signature</b>

```typescript
setInitialValue(searchableOptions: Array<SelectableValue<string[]>>, initValue?: string): {
        rcValue: string[];
        activeLabel: any;
    };
```
<b>Parameters</b>

|  Parameter | Type | Description |
|  --- | --- | --- |
|  searchableOptions | <code>Array&lt;SelectableValue&lt;string[]&gt;&gt;</code> |  |
|  initValue | <code>string</code> |  |

<b>Returns:</b>

`{
        rcValue: string[];
        activeLabel: any;
    }`