Forma 36


View TextInput on GitHub | View TextInput in Storybook

TextInput allows a user to input text or numbers.

Table of contents

  1. Best practices
  2. Variations
    1. TextInput type
    2. TextInput width
    3. TextInput states
    4. TextInput with copy button
    5. TextInput max. length

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

TextInput states (error, disabled)

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

TextInput with copy button (withCopyButton)

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

TextInput maximal length (maxLength)

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