Skip to main content

TextInput

A custom text input web component for BIM applications. HTML tag: bim-text-input

Extends​

  • LitElement

Implements​

Properties​

debounce?​

optional debounce: number

Represents the debounce property of the TextInput component. This property is used to control the delay in milliseconds before the input event is fired. The input event is debounced to prevent excessive event firing when the user types rapidly.

Default​

undefined

Example​

<bim-text-input debounce="500"></bim-text-input>

disabled​

disabled: boolean = false

Represents the disabled property of the TextInput component. This property is used to disable the input field. When set to true, the input field will be disabled and the user will not be able to interact with it.

Default​

false

Example​

<bim-text-input disabled></bim-text-input>

icon?​

optional icon: string

Represents the icon property of the TextInput component. This property is used to display an icon next to the input field.

Example​

<bim-text-input icon="material-symbols:search"></bim-text-input>

label?​

optional label: string

Represents the label property of the TextInput component. This property is used to display a label above or next to the input field.

Example​

<bim-text-input label="Name"></bim-text-input>

Implementation of​

HasName.label

name?​

optional name: string

Represents the name property of the TextInput component. This property is used to uniquely identify the input field within a form or group of inputs.

Example​

<bim-text-input name="username"></bim-text-input>

Implementation of​

HasName.name

placeholder?​

optional placeholder: string

Represents the placeholder property of the TextInput component. This property is used to display a hint or a placeholder text inside the input field. The placeholder text is displayed when the input field is empty and loses focus.

Example​

<bim-text-input placeholder="Enter your name.."></bim-text-input>

resize​

resize: "inline" | "none" | "vertical" | "both" | "horizontal" | "block" = "vertical"

Represents the resize property of the TextInput component. This property controls how the textarea can be resized. Possible values: "none", "both", "horizontal", "vertical", "block", "inline"

Default​

"vertical"

Example​

<bim-text-input resize="both"></bim-text-input>

value​

value: string = ""

Represents the value property of the TextInput component. This property is used to get or set the current value of the input field.

Example​

// Get the current value
const currentValue = textInput.value;

// Set a new value
textInput.value = "New Value";

Implementation of​

HasValue.value

vertical​

vertical: boolean = false

Represents the vertical property of the TextInput component. This property is used to control the layout of the input field. When set to true, the input field will be displayed vertically.

Default​

false

Example​

<bim-text-input vertical></bim-text-input>

styles​

static styles: CSSResult[]

CSS styles for the component.

Overrides​

LitElement.styles

Accessors​

query​

get query(): null | Query

Gets the query value derived from the current input value. The getQuery function is assumed to be a utility function that takes a string as input and returns a processed query value based on the input.

Example​

const textInput = new TextInput();
textInput.value = "Key?Value";
console.log(textInput.query);

Returns​

null | Query

The processed query value derived from the current input value.

type​

set type(value): void

Sets the type of the input field. The type property determines the behavior of the input field. It can be any of the following: "date", "datetime-local", "email", "month", "password", "search", "tel", "text", "time", "url", "week". If an invalid type is provided, the type will not be changed.

Example​

// Set the type to "email"
textInput.type = "email";

Parameters​

ParameterType
valuestring