# VectorInput Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)``, [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md), `IMultiPlaceholder` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/VectorInput/index.ts#L50 A vector input. The vector can have 2 to 4 dimensions with each dimension being a [NumericInput](https://api.playcanvas.com/pcui/classes/NumericInput.md). ## Constructors ### constructor ```ts new VectorInput(args?: Readonly) ``` Creates a new VectorInput. **Parameters** - `args` (`Readonly<`[`VectorInputArgs`](https://api.playcanvas.com/pcui/interfaces/VectorInputArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### binding ```ts get binding(): BindingBase set binding(value: BindingBase) ``` Gets the Binding object for the VectorInput. ### inputs ```ts get inputs(): NumericInput[] ``` Gets the array of NumericInput elements owned by this vector. ### max ```ts get max(): number set max(value: number) ``` Gets the maximum value accepted by all inputs of the vector. ### min ```ts get min(): number set min(value: number) ``` Gets the minimum value accepted by all inputs of the vector. ### placeholder ```ts get placeholder(): string[] set placeholder(value: string | string[]) ``` Gets the placeholder text of all inputs as an array. ### precision ```ts get precision(): number set precision(value: number) ``` Gets the maximum number of decimal places supported by all inputs of the vector. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Gets whether inputs should flash when their values change. ### step ```ts get step(): number set step(value: number) ``` Gets the amount that the value will be increased or decreased when using the arrow keys and the slider input for all inputs of the vector. ### value ```ts get value(): number[] set value(value: number[]) ``` Gets the value of the VectorInput as an array of numbers. ### values ```ts set values(values: number[][]) ``` Sets multiple values on the VectorInput. Each value should be an array representing the vector dimensions. If all values are the same, the VectorInput will display that value. Otherwise, it will display a "multiple values" state. ## Methods ### blur ```ts blur(): void ``` Unfocuses (blurs) all input elements. ### focus ```ts focus(): void ``` Focuses the first input element. ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers and paths to the Element's data binding. **Parameters** - `observers` (`Observer | Observer[]`): An array of observers or a single observer. - `paths` (`string | string[]`): A path for the observer(s) or an array of paths that maps to each separate observer. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ## Events ### EVENT_BLUR ```ts static readonly EVENT_BLUR: "blur" = 'blur' ``` Fired when the VectorInput loses focus. **Example** ```ts const vectorInput = new VectorInput(); vectorInput.on('blur', () => { console.log('VectorInput blurred'); }); ``` ### EVENT_CHANGE ```ts static readonly EVENT_CHANGE: "change" = 'change' ``` Fired when the value of the VectorInput changes. **Example** ```ts const vectorInput = new VectorInput({ dimensions: 3 }); vectorInput.on('change', (value: number[]) => { console.log('Value changed to:', value); }); ``` ### EVENT_FOCUS ```ts static readonly EVENT_FOCUS: "focus" = 'focus' ``` Fired when the VectorInput receives focus. **Example** ```ts const vectorInput = new VectorInput(); vectorInput.on('focus', () => { console.log('VectorInput 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 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)` - `destroy(): void` - `flash(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(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'`