TextInput

final class Phui\Components\TextInput

A single-line editor with selection, word motions and clipboard support. The value scrolls horizontally to keep the cursor visible, and newlines are stripped out of anything pasted in. Takes focus.

A single-line editor holding the value "phui/screen"

php

use Phui\Components\TextInput;
use Phui\Events\EmitEvent;

TextInput::mount()
    ->props(
        value: $this->query,
        placeholder: 'Search…',
        invalid: $this->query !== '' && ! $this->isValid,
    )
    ->on('change', fn (EmitEvent $e) => $this->query = $e->data);

Props

Prop	Type	Default	Description
`maxChars`	`int`	`1000`	Most characters the value may hold.
`invalid`	`bool`	`false`	Forces the invalid colour on.
`maxWidth`	`?int`	`null`	Caps the visible width; the value scrolls within it. Unbounded when `null`.
`placeholder`	`string`	`'Type here...'`	Shown while the value is empty and the field is unfocused.
`marker`	`string`	`'\|'`	The marker drawn before the value.

Reaching maxChars shows the invalid colour, the same as setting invalid. Further typing and the overflow of a paste are dropped.

Models

The component holds this and emits on every change. Pass it as a prop to take ownership, and handle its emit — see binding a value both ways.

Model	Type	Default	Emits
`value`	`string`	`''`	`change`

Emits

Event	Payload	Emitted when
`change`	`string`	The value is edited.

Input

Input	Action
Any character	Insert at the cursor, replacing the selection
`←` `→`	Move by one character
`Alt` + `←` `→`	Move by one word
`Home` `End`	Move to the start or end of the value
`Shift` + any motion	Extend the selection instead of moving
`Backspace`	Delete back, or the selection
`Alt` + `Backspace`	Delete the word before the cursor
`Delete` `Ctrl`+`d`	Delete forward, or the selection
`Ctrl`+`a`	Select all
`Ctrl`+`y`	Copy the selection to the system clipboard
`Ctrl`+`x`	Cut the selection
`Ctrl`+`w`	Delete the word before the cursor, or the selection
`Ctrl`+`k`	Delete to the end of the value
`Ctrl`+`u`	Delete to the start of the value
Paste	Insert the pasted text, replacing the selection
Left click	Move the cursor to the clicked position

Word motions treat spaces as boundaries.

Colours

Phui\Components\Colours\TextInputColours

Colour	Palette default	Used for
`text`	`text`	The value.
`marker`	`muted`	The marker at rest.
`active`	`accent`	The marker and cursor while focused.
`invalid`	`danger`	The marker and cursor while invalid.
`placeholder`	`muted`	The placeholder text.
`selection`	`surface`	The background behind the selection.

TextInput ​

Props ​

Models ​

Emits ​

Input ​

Colours ​