Design System React

AlphaThis a work in progress. Your input will help us to improve it. Report issues or raise questions on GitHub.

Text input

Last updated
19/12/2025
Package version
0.13.0
JSX for this example
<React.Fragment />

Text input with hint text

JSX for this example
<React.Fragment />

Text input with associated button

JSX for this example
<React.Fragment />

Text input with character count

JSX for this example
<React.Fragment />

Text input with currency

JSX for this example
<React.Fragment />

Text input configuration

TextInput components can use the following props:

className (optional)
A CSS class name to pass to the component.
errorMessage (optional)
Text to use for an error message.
hasError (optional)
Whether the field is in an error state. Boolean.
hintText (optional)
Text to use for a text input's hint text.
id
Value to use for the id attribute of the input element.
label
Text to use for the text input's associated label.
name (optional)
Value to use for the name attribute of the input element.
onBlur (optional)
Function to fire in response to a blur event.
onChange (optional)
Function to fire in response to a change event.
placeholder (optional)
Value to use for the placeholder attribute of the input element.
type
Value to use for the type attribute of the input element. Default is text.
value (optional)
The default value of the input element.
width (optional)

The width to use for the input element. If no width is specified the text input is full-width. Supported values are:

  • fixed-20 - 20 characters wide
  • fixed-10 - 10 characters wide
  • fixed-5 - 5 characters wide
  • fixed-4 - 4 characters wide
  • fixed-3 - 3 characters wide
  • fixed-2 - 2 characters wide
  • fluid-three-quarters - three quarters of the width of the parent container
  • fluid-two-thirds - two thirds of the width of the parent container
  • fluid-half - half of the width of the parent container
  • fluid-one-third - one third of the width of the parent container
  • fluid-one-quarter - one quarter of the width of the parent container

Text input with button configuration

Use these additional props for a text input with an associated button:

buttonIcon
Name of the icon to use.
buttonText
Text content for the button (for screen readers).
hasButton
Whether the component has an associated button. Boolean.

Character count configuration

Use these additional props for a text input with a character count:

countThreshold (optional)
Percentage threshold to show the character count at.
maxlength
Maximum number of characters permitted.

Currency input configuration

Use these additional props for a currency text input:

currencySymbol (optional)
Currency symbol to use. Default is £.
isCurrency
Whether the component is a currency field. Boolean.
Back to top