NUI / Components / Input

TextInput

ImplementedInput

TextInput renders a styled single-line text input.

Supported as a styled text input field.

Overview

TextInput renders a styled single-line text input.

When to use

Forms.
Settings.
Search fields.
Names.
Other styled single-line input.

Children

Does not support children.

Basic syntax

nui

TextInput SearchField {
    placeholder: "Search"
}

Supported properties

Property	Type	Required	Default	Description
`text`	string	No	Empty	Initial text value.
`placeholder`	string	No	Empty	Placeholder text.
`enabled`	bool	No	true	Whether the input can be used.
`focusable`	bool	No	true	Whether the input can receive focus.
`font`	string	No	Project default	Field font name.
`fontSize`	number	No	14	Text size.
`textColor`	color	No	Default	Text color.
`placeholderColor`	color	No	Default	Placeholder color.
`selectionColor`	color	No	Default	Selection highlight color.
`caretColor`	color	No	Default	Caret color.
`backgroundColor`	color	No	Default	Field background.
`hoveredColor`	color	No	Default	Hover background.
`disabledColor`	color	No	Default	Disabled background.
`borderColor`	color	No	Default	Border color.
`borderThickness`	number	No	0	Border thickness.
`radius`	number	No	0	Corner radius.
`textAlign`	enum	No	left	Horizontal text alignment.
`verticalTextAlign`	enum	No	center	Vertical text alignment.
`padding`	margin	No	Default	Text padding.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`opacity`	number	No	1	Render opacity.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

TextInput may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. See section 7.

Full syntax example

nui

TextInput SearchField {
    text: ""
    placeholder: "Search"
    enabled: true
    focusable: true
    font: "BodyFont"
    fontSize: 16
    textColor: "#F8FAFC"
    placeholderColor: "#94A3B8"
    selectionColor: "#2563EB"
    caretColor: "#FFFFFF"
    backgroundColor: "#111827"
    hoveredColor: "#1F2937"
    disabledColor: "#4B5563"
    borderColor: "#334155"
    borderThickness: 1
    radius: 4
    textAlign: left
    verticalTextAlign: center
    padding: margin(6, 8, 6, 8)
    width: 280
    height: 36
    opacity: 1
    visible: true
}

Limitations

Current public docs should treat this as a single-line input.
Multiline input and rich text input are planned separately.