This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

TextInput

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

Table of contents

How to use TextInput

The TextInput component can be configured in a number of different ways. Use this guidance to determine the correct variation based on the context.

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

Code examples

Basic example

TextInput with label

In order to create a correct text input the recommendation is to add a label to any kind of input. In order to do that, we provide you couple of additional components that you can use to compose your inputs with labels, help or validation messages. Read more about FormControl

TextInput with buttons

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

Example of spaced TextInput.Group.

TextInput variations

Keep in mind, that if you need to use an input without a label, you need to pass aria-label attribute to create an input that would be accessible to assistive technologies, like screen readers.

TextInput with placeholder

TextInput disabled

TextInput invalid

Content recommendations

  • Use direct and succinct copy that helps the user to successfully complete the 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.

Props

TextInput

NameRequiredDefaultTypeDescription
defaultValuestringSet's default value for text input
iconReactElement<any, string | JSXElementConstructor<any>>Expects any of the icon components
idstringSets the id of the input
isDisabledfalse
false
true
Applies disabled styles
isInvalidfalse
false
true
Applies invalid styles
isReadOnlyfalse
false
true
Applies read-only styles
isRequiredfalse
false
true
Validate the input
namestringSet the name of the input
onBlurFocusEventHandler<HTMLInputElement | HTMLTextAreaElement>Allows to listen to an event when an element loses focus
onChangeChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>Allows to listen to an input’s change in value
onFocusFocusEventHandler<HTMLInputElement | HTMLTextAreaElement>Allows to listen to an event when an element get focused
onKeyDownKeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>Allows to listen to an event when a key is pressed
sizemedium
"small"
"medium"
Defines which size of the input should be rendered
typetext"number" | "text" | "email" | "file" | "password" | "search" | "url"Set the type of the input
valuestringSet the value of the input
willBlurOnEsctrue
false
true
Boolean property that allows to blur on escape
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-text-inputstringA [data-test-id] attribute used for testing purposes

TextInput.Group

NameRequiredDefaultTypeDescription
spacingspacingSInputGroupSpacingSets the spacing of the elements if variant is separate.
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes