@myxplor/forms
v0.10.18
Published
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.
Downloads
16
Keywords
Readme
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 textlabel
- human readable text displayed above input. Optional, if no value provided, usesname
value
- the default value of the inputhint
- hint text, display below the inputerrors
- 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 remainingautoFocus
- 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}
/>