Class InputElement

Represents an <input> element.

Hierarchy (View Summary)

InteractiveElement
- InputElement

Index

Constructors

constructor

Methods

add applyMagic attr class css each on onInput placeholder render renderToString style text value with

Constructors

constructor

new InputElement(type?: string): InputElement
Creates a new InputElement.
Parameters
- type: string = "text"
  The input type (default "text").
Returns InputElement
Overrides InteractiveElement.constructor
- Defined in elements/interactive.ts:16

Methods

add

add(...children: (BaseElement | BaseElement[])[]): this
Alias for .with(). Adds child elements.
Parameters
- ...children: (BaseElement | BaseElement[])[]
  Child elements.
Returns this
The element instance for chaining.
Inherited from InteractiveElement.add
- Defined in elements/base-element.ts:163

applyMagic

applyMagic(args: any[]): this
Applies "Magic" argument processing. Infers intent based on argument types.
Parameters
- args: any[]
  Variadic arguments.
Returns this
The element instance.
Inherited from InteractiveElement.applyMagic
- Defined in elements/base-element.ts:43

attr

attr(name: string, value: string): this
Sets an HTML attribute.
Parameters
- name: string
  The attribute name.
- value: string
  The attribute value.
Returns this
The element instance for chaining.
Inherited from InteractiveElement.attr
- Defined in elements/base-element.ts:295

class

class(className: string): this
Adds a CSS class name to the element.
Parameters
- className: string
  The class name(s) to add.
Returns this
The element instance for chaining.
Inherited from InteractiveElement.class
- Defined in elements/base-element.ts:281

css

css(styles: StyleObject): this
Applies CSS classes using the CSS-in-JS style manager. Generates a unique class name and injects styles.
Parameters
- styles: StyleObject
  StyleObject defining the styles.
Returns this
The element instance for chaining.
Inherited from InteractiveElement.css
- Defined in elements/base-element.ts:267

each

each<T>(
dataSource: State<T[]> | (() => T[]),
renderer: (item: T, index: number) => BaseElement,
): this
Renders a list of items reactively.
Type Parameters
- T
Parameters
- dataSource: State<T[]> | (() => T[])
  A State array or a function returning an array.
- renderer: (item: T, index: number) => BaseElement
  Function to create a BaseElement for each item.
Returns this
The element instance for chaining.
Example
```
ul().each(tasksState, (task) => li(task));
```
Inherited from InteractiveElement.each
- Defined in elements/base-element.ts:212

on

on<K extends keyof HTMLElementEventMap>(
eventName: K,
handler: (event: HTMLElementEventMap[K]) => void,
): this
Attaches an event listener to the element.
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- eventName: K
  The event name (e.g., "click").
- handler: (event: HTMLElementEventMap[K]) => void
  The event handler function.
Returns this
The element instance for chaining.
Inherited from InteractiveElement.on
- Defined in elements/base-element.ts:306

onInput

onInput(handler: (value: string, event: Event) => void): this
Adds an input event listener.
Parameters
- handler: (value: string, event: Event) => void
  Callback receiving the new value and the event.
Returns this
- Defined in elements/interactive.ts:43

placeholder

placeholder(text: string): this
Sets the placeholder text.
Parameters
- text: string
  The placeholder string.
Returns this
- Defined in elements/interactive.ts:34

render

render(): HTMLElement
Renders the element into a DOM node.

Returns HTMLElement
The created HTMLElement.

Throws
Error if called outside of a browser environment.
Inherited from InteractiveElement.render
- Defined in elements/base-element.ts:419

renderToString

renderToString(): string
Renders the element to an HTML string.

Returns string
The HTML string.
Inherited from InteractiveElement.renderToString
- Defined in elements/base-element.ts:430

style

style(styles: Partial<CSSStyleDeclaration>): this
Applies inline styles to the element.
Parameters
- styles: Partial<CSSStyleDeclaration>
  Object containing CSS properties.
Returns this
The element instance for chaining.
Example
```
div().style({ color: "red", fontSize: "16px" });
```
Inherited from InteractiveElement.style
- Defined in elements/base-element.ts:249

text

text(
    content:
        | string
        | number
        | State<string | number>
        | (() => string | number),
): this
Sets the text content of the element. Supports reactive state binding.
Parameters
- content: string | number | State<string | number> | (() => string | number)
  String, number, reactive State, or getter function.
Returns this
The element instance for chaining.
Example
```
div().text("Static Text");
div().text(myState); // Updates automatically
```
Inherited from InteractiveElement.text
- Defined in elements/base-element.ts:176

value

value(val: string): this
Sets the value attribute.
Parameters
- val: string
  The value.
Returns this
- Defined in elements/interactive.ts:25

with

with(...children: (BaseElement | BaseElement[])[]): this
Adds child elements to this element.
Parameters
- ...children: (BaseElement | BaseElement[])[]
  Child elements (variadic or array).
Returns this
The element instance for chaining.
Example
```
div().with(span("Hello"), span("World"));
```
Inherited from InteractiveElement.with
- Defined in elements/base-element.ts:147

Class InputElement

Hierarchy (View Summary)

Index

Constructors

Methods

Constructors

constructor

Parameters

Returns InputElement

Methods

add

Parameters

Returns this

applyMagic

Parameters

Returns this

attr

Parameters

Returns this

class

Parameters

Returns this

css

Parameters

Returns this

each

Type Parameters

Parameters

Returns this

Example

on

Type Parameters

Parameters

Returns this

onInput

Parameters

Returns this

placeholder

Parameters

Returns this

render

Returns HTMLElement

Throws

renderToString

Returns string

style

Parameters

Returns this

Example

text

Parameters

Returns this

Example

value

Parameters

Returns this

with

Parameters

Returns this

Example

Settings

On This Page