TextInput

A single line of text, with a real terminal cursor.

import { TextInput } from '@textui/widgets';

<TextInput label="Name" value="" onChange={(value) => console.log(value)} />

Props

| Prop | Type | Default | | | — | — | — | — | | value | string | required | | | onChange | (value: string) => void | | | | onSubmit | (value: string) => void | | | | placeholder | string | | | | label | string | | | | hideLabel | boolean | | Keep the label as the field’s name but do not draw it inside the field - for a form or a dialog that already shows it beside or above the input. | | mask | string | | Replace every character, for secrets. | | maxLength | number | | Stop accepting input past this many characters. | | autoFocus | boolean | | | | search | boolean | | Draw a search glyph before the field. | | focusId | string | | A stable focus id, so a command can send the reader here by name. Without one a control’s id is derived from its instance, which nothing outside the render can know - so “focus the filter” has nothing to name and the key that would do it cannot be written. | | onEdge | (edge: 'start' \| 'end') => void | | The caret tried to leave the field. A single-line input answers left and right itself right up to the ends, so a caller that wants those keys past the ends cannot have them from a key handler - the field takes the key and reports nothing. This is how it reports: the palette drills into a command’s choices on right, and the path picker goes up a folder on left. TextArea has had this from the start; the two controls disagreeing is what left both of those keys silently doing nothing. |

Plus everything on BoxProps.

Role: textbox.

It publishes a real cursor position when the terminal has a cursor, so the caret is where typing lands rather than a drawn approximation. That means counting the label and any glyph before it, and scrolling the value sideways to keep the caret in view on a field narrower than its contents.

hideLabel keeps the label as the field’s accessible name without drawing it, for a form or a dialog that already shows it.

focusId is worth setting. Without one the focus id is derived from the instance, which nothing outside the render can know - so a command meaning “focus the filter” has nothing to name.

See also

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.

Edit this page on GitHub