Text Input

Import#

import { TextInput } from '@volue/wave-react';

Examples#

Basic#

Controlled#

It is most common to set up TextInput as a controlled component​, meaning that React state drives its value. To achieve this you must provide value and onChange properties.

With Form Field#

TextInput should be clearly labeled so it's obvious to users what they should enter. Optionally, you may want to connect helper text and/or validation feedback message to the input element. Thus it is recommended to wrap inputs with Form Field to create a consistent set of form fields that are accessible to screen reader users.

Placeholder#

Placeholder text provides examples of what to enter.

Disabled input#

Pass isDisabled prop to the accompanying FormField and it will cascade down to the input.

You can also pass isDisabled prop directly to TextInput.

With leading/trailing visuals#

In some scenarios, you might need to add a visual positioned on the edge inside the input. This includes icons for decoration and help distinguishing between inputs, as well as special form of help text that works best inline. leadingVisual and trailingVisual props help with this use case.

Use leadingVisual for things like currency symbols, country codes, etc.:

Use trailingVisual for things like units of measure:

By using <Button> as trailingVisual, you can create a password input with a show/hide password functionality.

Sizes#

Wave provides two TextInput sizes ‐ medium and small, with the medium size used by default. All sizes are aligned with sizes of other related components like Button or Select.

Size inheritance#

TextInput automatically inherits size, when placed inside a FormField component.

Responsive#

TextInput supports responsive syntax for its size property, which means you can change its size based on the viewport.

Multi-sizing#

Wave provides applySizes utility, which lets you specify size "scopes" within your app. All inputs within a scope will share the same size unless overwritten on a per-control basis.

Input groups#

Visually grouping closely related fields such as first and last name, or city and zip code can help users make sense of the information they must fill in. You can use layout component such as Auto Grid to arrange fields into groups, or to vary field layouts across different screen sizes.

API Reference#