Skip to content

text-input.md

Latest commit

 

History

History
53 lines (40 loc) · 2.84 KB

text-input.md

File metadata and controls

53 lines (40 loc) · 2.84 KB
Raw
title TextInput
parent Controls and forms
grand_parent Components

TextInput

{: .no_toc }

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