@hashicorp/react-text-input

Text field input to be used in formik forms

Usage no npm install needed!

<script type="module">
  import hashicorpReactTextInput from 'https://cdn.skypack.dev/@hashicorp/react-text-input';
</script>

README

TextInput

A controlled text input intended for use with Formik.

Props

  • field (object) - Props for the input element, supplied by Formik .
  • form (object) - Form data including error and touched info, supplied by Formik .
  • label (string) [optional] - Label text, HTML allowed.
  • type (enum, ["text","email","hidden"]) [optional] - type for the input field.
  • placeholder (string) [optional] - Placeholder text for the field
  • theme (object) [optional] - Controls the appearance of the text input. theme.background should be one of ["light", "dark", "brand"].

Dependents

  • hashi-newsletter-signup-form

Notes

This version of text-input has been created as a controlled input intended for use with Formik. Formik's <Field> component drives much of this component's prop structure.

This component should also be usable without Formik -- you will need to pass in field data in the expected format, and you will also need to pass in empty objects for form={{ errors: {}, touched: {}}} if you are appplying any validation to the field.

If you're migrating to this component from text-input, you will likely need to refactor code significantly, as you'll need to implement the related form with Formik. If you haven't used Formik in a while (or ever!), the Formik overview, particularly the Basic example form, is probably the easiest place to start.