Skip to main content

Component | Text Input

Render a text input box.

ui.textInput("text-input-key", { 
label: "Enter some text",
onEnter: (value) => console.log(value)
})

Learn more about working with inputs.

API reference

Function signature

ui.textInput(
id: string,
properties?: Partial<{
label: string,
description: string,
required: boolean,
initialValue: string | null,
validate: (value: string | null) => string | void,
onEnter: (value: string | null) => void,
style: Style
}>
)

Parameters

id

required string
A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

properties.label

optional string

The label to display above the text input. If not provided, the label will be inferred from the id.


properties.description

optional string

A description to display between the label and text input box.


properties.required

optional boolean

Validate that the text input is not empty before submitting the form it's part of or calling it's onEnter hook. Defaults to true.


properties.initialValue

optional string | null

The initial value of the text input. Defaults to null. You can also update the value of the text input at any time using the page.setInputs() method.


properties.validate

optional (value: string | null) => string | void
Validate the text input value before submitting it. If the function returns a string, it will be displayed as an error message.

properties.onEnter

optional (value: string | null) => void
A callback function that is called when the user presses enter in the text input.

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.