# SelectInput

Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)`<unknown>`, [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md)

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/SelectInput/index.ts#L106

An input that allows selecting from a dropdown or entering tags.

## Constructors

### constructor

```ts
new SelectInput(args?: Readonly<SelectInputArgs>)
```

Creates a new SelectInput.

**Parameters**

- `args` (`Readonly<`[`SelectInputArgs`](https://api.playcanvas.com/pcui/interfaces/SelectInputArgs.md)`>`, optional, default `{}`): The arguments.

## Accessors

### disabledOptions

```ts
set disabledOptions(value: Record<string, string>)
```

Sets the options that should be disabled. The keys are the option values and the values are
the text to show when the option is disabled.

### disabledValue

```ts
set disabledValue(value: string)
```

Sets the value that is currently disabled (shown but not selectable).

### fallbackOrder

```ts
set fallbackOrder(value: string[])
```

Sets the order in which options should be checked for a valid fallback when the current
value becomes disabled.

### invalidOptions

```ts
get invalidOptions(): unknown[]
set invalidOptions(value: unknown[])
```

Gets the array of invalid options.

### multiSelect

```ts
get multiSelect(): boolean
```

Gets whether the SelectInput allows selecting multiple options.

### options

```ts
get options(): { t: string; v: string | number | boolean }[]
set options(value: { t: string; v: string | number | boolean }[])
```

Gets the dropdown options.

### placeholder

```ts
get placeholder(): string
set placeholder(value: string)
```

Gets the placeholder text for the input field.

### renderChanges

```ts
get renderChanges(): boolean
set renderChanges(value: boolean)
```

Gets whether the SelectInput should flash when its value changes.

### value

```ts
get value(): unknown
set value(value: unknown)
```

Gets the value of the SelectInput. For multi-select inputs, this returns an array.

### values

```ts
set values(values: unknown[])
```

Sets multiple values on the SelectInput. If all values are the same, the SelectInput will
display that value. Otherwise, it will display a "multiple values" state.

## Methods

### _onDocumentPointerDown

```ts
protected _onDocumentPointerDown(evt: PointerEvent): void
```

Handles pointer down events on the document. It has to be the document instead of the window
because otherwise `pointerdown` is not fired when the PCUI app is running in an iframe.

**Parameters**

- `evt` (`PointerEvent`): Pointer event.

### blur

```ts
blur(): void
```

Unfocuses (blurs) the SelectInput.

### close

```ts
close(): void
```

Closes the dropdown menu.

### destroy

```ts
destroy(): void
```

Destroys the Element and its events.

### focus

```ts
focus(): void
```

Focuses the SelectInput.

### open

```ts
open(): void
```

Opens the dropdown menu.

### toggle

```ts
toggle(): void
```

Toggles the dropdown menu.

### unlink

```ts
unlink(): void
```

Unlinks the Element from its observers.

## Events

### EVENT_BLUR

```ts
static readonly EVENT_BLUR: "blur" = 'blur'
```

Fired when the SelectInput loses focus.

**Example**

```ts
const selectInput = new SelectInput();
selectInput.on('blur', () => {
    console.log('SelectInput blurred');
});
```

### EVENT_CHANGE

```ts
static readonly EVENT_CHANGE: "change" = 'change'
```

Fired when the value of the SelectInput changes.

**Example**

```ts
const selectInput = new SelectInput();
selectInput.on('change', (value) => {
    console.log('Value changed to:', value);
});
```

### EVENT_FOCUS

```ts
static readonly EVENT_FOCUS: "focus" = 'focus'
```

Fired when the SelectInput receives focus.

**Example**

```ts
const selectInput = new SelectInput();
selectInput.on('focus', () => {
    console.log('SelectInput focused');
});
```

## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md)

- `get alignItems(): string` · `set alignItems(value: string)`
- `get alignSelf(): string` · `set alignSelf(value: string)`
- `get binding(): BindingBase` · `set binding(value: BindingBase)`
- `get class(): DOMTokenList`
- `get dom(): HTMLElement`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `get error(): boolean` · `set error(value: boolean)`
- `get flexBasis(): string` · `set flexBasis(value: string | number)`
- `get flexDirection(): string` · `set flexDirection(value: string)`
- `get flexGrow(): string` · `set flexGrow(value: string | number)`
- `get flexShrink(): string` · `set flexShrink(value: string | number)`
- `get flexWrap(): string` · `set flexWrap(value: string)`
- `get height(): number` · `set height(value: string | number)`
- `get hidden(): boolean` · `set hidden(value: boolean)`
- `get hiddenToRoot(): boolean`
- `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)`
- `get justifyContent(): string` · `set justifyContent(value: string)`
- `get justifySelf(): string` · `set justifySelf(value: string)`
- `get parent(): Element` · `set parent(value: Element)`
- `get readOnly(): boolean` · `set readOnly(value: boolean)`
- `get style(): CSSStyleDeclaration`
- `get tabIndex(): number` · `set tabIndex(value: number)`
- `get width(): number` · `set width(value: string | number)`
- `flash(): void`
- `link(observers: Observer | Observer[], paths: string | string[]): void`
- `static create<Type extends Element>(type: string, args: ElementArgs): Type`
- `static register<Type extends Element>(type: string, cls: Object, defaultArguments?: object): void`
- `static unregister(type: string): void`
- `static readonly EVENT_CLICK: "click" = 'click'`
- `static readonly EVENT_DESTROY: "destroy" = 'destroy'`
- `static readonly EVENT_DISABLE: "disable" = 'disable'`
- `static readonly EVENT_ENABLE: "enable" = 'enable'`
- `static readonly EVENT_HIDE: "hide" = 'hide'`
- `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'`
- `static readonly EVENT_HOVER: "hover" = 'hover'`
- `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'`
- `static readonly EVENT_PARENT: "parent" = 'parent'`
- `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'`
- `static readonly EVENT_SHOW: "show" = 'show'`
- `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'`