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>

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>

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