TextInput is a input field intended for use with editable strings and character data.

Screenshot of component TextInput text


The TextInput field uses standard accessor syntax and will display current string values from the microcontroller, and accepts user input to write/modify strings.

import { TextInput } from '@electricui/components-desktop-blueprint'
<TextInput accessor="dev_nickname" />

Or with functional writer syntax.

import { TextInput } from '@electricui/components-desktop-blueprint'
accessor={state => state.dev_nickname}
writer={(state, value) => {
state.dev_nickname = value


It's not always desirable to send variable changes to the microcontroller until the user has finished with their input.

Set the duration between state pushes to hardware (in milliseconds) with throttleDuration. The duration counts down from the last user input event, and writes the value once the delay elapses.

<TextInput accessor="dev_nickname" throttleDuration={750} />

Limiting string length

Embedded hardware often has fixed length buffers for strings. The maxLength number property prevents text input after hitting the threshold.

<TextInput accessor="wifi_ssid" maxLength={32} />

This length is intended as user-facing input restriction, and does not take null/termination bytes into account.

Placeholder Text

It is common to use TextInput in situations where the hardware hasn't provided existing state. i.e. password credentials, user-overrides.

The placeholder prop accepts a string and renders when no valid string is available in the state tree. To prevent confusion, the text is lower contrast.

Screenshot of component TextInput placeholder
<TextInput accessor="password" placeholder="Enter the WiFi Password" />

For clear UX, avoid setting the placeholder to a string matching a typical input.

i.e. Don't use "t0rn4dO" as the placeholder for a password input.


Constraining width

The default behaviour is to fill the available width of the container. To restrict a TextInput in a basic case, create a narrower container (this example is half the width of the parent container).

Screenshot of component TextInput half-width
<div style={{ maxWidth: '50%' }}>
<TextInput accessor="dev_nickname" />

Rounded Edges

Use the round property for semi-circular endcaps.

Screenshot of component TextInput round
<TextInput accessor="username" round />


Use the large property to increase the size. Use small to decrease the size

Screenshot of component TextInput small
Screenshot of component TextInput normal
Screenshot of component TextInput large
<TextInput accessor="pitch_gain" large />
<TextInput accessor="roll_damping" small />

Intent Colours

TextInput accepts an intent property to control the colour of the frame.

Screenshot of component TextInput intent-none
Screenshot of component TextInput intent-primary
Screenshot of component TextInput intent-success
Screenshot of component TextInput intent-warning
Screenshot of component TextInput intent-danger
<TextInput accessor="robot_name" intent="success" />

or specify the Intent enum:

import { Intent } from '@blueprintjs/core'
<TextInput accessor="robot_name" intent={Intent.SUCCESS} />


Render an icon on the left-hand side of the input by specifying a leftIcon property.

See the Icon component for details.

The icon will automatically inherit the intent colours if active.

Screenshot of component TextInput icon
Screenshot of component TextInput icon-intent
<TextInput accessor="fleet-id" leftIcon="tractor" />