@myxplor/forms

Forms

A standard way to render our form inputs, textareas, and submit buttons. The best way to get a feel of how these components work is via storybook.

FormInput, FormPassword and FormTextArea all share the below props

• name - name of input. required
• onChange - callback function when input changes. required
• required - if a value is required, for browser clientside validation. Also adds "*" after label text
• label - human readable text displayed above input. Optional, if no value provided, uses name
• value - the default value of the input
• hint - hint text, display below the input
• errors - an array of errors to be displayed. If this provided, the input will turn red.
• loading - if the form is loading/submitting. If is loading, input becomes readonly, and errors are reset. (so that hint text is displayed again)
• maxLength - displays a countdown timer of how many chars remaining
• autoFocus - if the input should be automatically focused. Only if the user agent is not a mobile

Note: FormSubmit, has its' own set of props.

  <FormInput 
    required={true} 
    name="email"
    label="First Name"
    value="Thomas"
    autoFocus="true"
    onChange={this.handleChange}
  />

With errors

Pass the errors props an array of errors

  <FormInput 
    required={true} 
    name="first_name"
    label="First Name"
    value="Thomas"
    errors={[
      "This needs to be filled out"
    ]}
    onChange={this.handleChange}
  />

Note: in your errors, if you pass an object with a key of title it will be rendered in bold.

  <FormInput 
    name="first_name"
    label="First Name"
    value="Thomas"
    errors={
      [
        { "title": "Opps" },
        "This is terrible"
      ]
    }
    onChange={this.handleChange}
  />