Forma 36 Logo

TextInput

View TextInput on GitHub | View TextInput in Storybook

The TextInput component allows a user to input text or numbers.

Best practices

  • To ensure accessability, provide a name

TextInput variations

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

TextInput type (type)

TextField TypeNotes
textUsed for plain text
passwordUsed for entering passwords or sensitive information
emailUsed for e-mail addresses (will dispatch native autocomplete)
numberUsed for numbers
urlUsed for urls
dateUsed for dates (will display native date picker component)

TextInput width (width)

TextField WidthValue
full100%
large420px
medium240px
small120px

TextInput states (error, disabled)

PropertyDescription
disabledUsed to disable the input field
errorUsed to visually indicate an error

TextInput with copy button (withCopyButton)

PropertyDescription
withCopyButtonUsed to add a button to the TextInput which will copy the input value to the clipboard on click

TextInput maximal length (maxLength)

PropertyDescription
maxLengthUsed to limit the length of the input value characters to a given number