TextInput

TextInput is a form component, that allows users to input text or numbers and should be used in a form context.

TextInput is supporting different types of inputs, like text, email, file, number, password, search, url, where text is the default.

Import

import { TextInput } from '@contentful/f36-components';
// or
import { TextInput } from '@contentful/f36-forms';

Examples

Using as a controlled input

Controlled components in React are those in which form data is handled by the component’s state.

For using the TextInput as a controlled input, you need to:

  • Pass value property, with this property it will already be a controlled component;
  • Pass onChange handler, so you can use it to update the value of the input;

Using as an uncontrolled input

Uncontrolled components are those for which the form data is handled by the DOM itself. “Uncontrolled” refers to the fact that these components are not controlled by React state.

You can use the TextInput as an uncontrolled input, for that you can:

  • Set the defaultValue property, it will ensure that the initial value of the input is set.
  • Don't set the value as it will make the input controlled.

Using outside of forms

When TextInput is used outside of form (without FormControl) and has no <label> associated with it, you need to specify aria-label.

Using an icon

It is possible to provide an icon to the TextInput. It will be displayed on the left-hand side of the input.

With different sizes

TextInput comes with the small and medium sizes.

With action buttons

TextInput.Group enables the user to set a button at the start or end of an input, with some spacing or collapsed.

Different states

Props (API reference)

Open in Storybook

TextInput

Name

Type

Default

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

defaultValue
string

Set's default value for text input

icon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components

id
string

Sets the id of the input

isDisabled
false
true

Applies disabled styles

false
isInvalid
false
true

Applies invalid styles

false
isReadOnly
false
true

Applies read-only styles

false
isRequired
false
true

Validate the input

false
name
string

Set the name of the input

onBlur
FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>

Allows to listen to an event when an element loses focus

onChange
ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>

Allows to listen to an input’s change in value

onFocus
FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>

Allows to listen to an event when an element get focused

onKeyDown
KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>

Allows to listen to an event when a key is pressed

size
"small"
"medium"

Defines which size of the input should be rendered

medium
testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-text-input
value
string

Set the value of the input

willBlurOnEsc
false
true

Boolean property that allows to blur on escape

true

TextInput.Group

Name

Type

Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

spacing
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

Sets the spacing of the elements if variant is separate.

spacingS
testId
string

A [data-test-id] attribute used for testing purposes

Density support

These components supports multiple densities thanks to the useDensity hook and automatically adjusts its styling for each density (when wrapped with the DensityProvider).

Content guidelines

  • Use direct and succinct copy that helps a user to successfully complete a form
  • Do not preface the instructions with introductory text, such as "please"
  • Use sentence style caps (in which only the first word of a sentence or term is capitalized)

Accessibility

  • To ensure TextInput meets accessibility standards, provide name and id
  • Keep in mind that to provide that accessible inputs, you need to use labels.
  • If you decide, that for some reason you would not use the label, please provide aria-label attribute to make it accessible for technologies like screen readers.