Text input

The TextInput component is a component that is used to get user information in a single-line text field. It is rendered for multiple fields and may be used by other new fields in the future.

Used by

Short Answer
URL
Email

const TextInput = React.memo(function TextInput(props) {
  return <input {...props} />;
});
const components = {
  TextInput
}
// ...and then elsewhere
<FormiumForm components={components} />

If you want to change the rendering behavior to be different depending which field it is being used for, you can do so by looking at its type prop like so:

const TextInput = React.memo(function TextInput({type, ...props}) {
  switch (type) {
    // Short Answer
    case 'text':
      return <input type={type} {...props} className="my-text-input" />;
    // Email
    case 'email':
      return <input type={type} {...props} className="my-email-input" />;
    // URL field
    case 'url':
      return <input type={type} {...props} className="my-url-input" />;
    // Always specify a fallback.
    default:
       // You might want to warn if you get this far...
       // console.warn('<TextInput /> doesn\'t have an implementation for specified type of `${type}`.')
       return <input type={type}  {...props}  />;
  }
});
const components = {
  TextInput
}
// ...and then elsewhere
<FormiumForm components={components} />

Props

In addition to its own props, it supports all valid props for HTML <input> elements and proxies them to that element in the DOM; the most common ones are detailed below.

interface TextInputProps extends BaseInputProps@formium/react

Props	Description
`disabled`	`boolean` Whether or not the field is disabled. Required Inherited from `BaseInputProps.disabled`
`id`	`string` The unique identifier of the question. Required Inherited from `BaseInputProps.id`
`name`	`string` The administrative key for the field. Required Inherited from `BaseInputProps.name`
`onBlur`	`React.FormEventHandler` Event handler invoked when input is blurred. Required Inherited from `BaseInputProps.onBlur`
`onChange`	`React.FormEventHandler` Change event handler. Use event.target.value for new value. Required Inherited from `BaseInputProps.onChange`
`onFocus`	`React.FormEventHandler` Event handler invoked when input is focused. Required Inherited from `BaseInputProps.onFocus`
`placeholder`	`string` Input placeholder value Inherited from `BaseInputProps.placeholder`
`required`	`boolean` Whether or not the field is required. Required Inherited from `BaseInputProps.required`
`type`	`string` HTML `input` type attribute. Required
`value`	`string` Form value of the input, for controlled usage. Required Inherited from `BaseInputProps.value`

Was this page helpful?

PreviousForm Control NextTextarea

Text input

Props

Build forms, without the tears.

Product

Resources

Legal