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.
<APIInterface api="TextInputProps" />
Was this page helpful?

Build forms, without the tears.