Form Elements

The Starter Kit comes with a few Form Elements out of the box. More will be added along the way in the future.

TextInput

The standard input field that can be used for different types of data input.

It takes a few arguments as props:

• type (string) is the input type. E.g., 'text' or 'password'
• value (any) is the value of the field
• name (string) is the name of the field
• onChange (function) is the invoked function on change
• placeholder (string) is the placeholder text for the input
• errorMsg (string). If this string is not empty, an error message will be displayed with the value of the string.

Examples:

<TextInput
type="text"
value=""
name="my-input"
onChange={()=>{}}
placeholder="This is my cool input"
errorMsg=""
/>

<TextInput
type="password"
value=""
name="my-input"
onChange={()=>{}}
placeholder="Your password"
errorMsg="Password is invalid!"
/>

TextArea

An HTML textarea element. It takes the followig arguments as props:

• value (any) is the value of the textarea
• name (string) is the name of the element
• onChange (function) is the function executed on change
• placeholder (string) is the placeholder text
• errorMsg (string). If this string is not empty, an error message will be displayed with the value of the string

Examples:

<TextArea
value=""
name"text-area"
onChange={()=>{}}
placeholder="My nice TextArea"
errorMsg=""
/>

<TextArea
value=""
name="text-area"
onChange={()=>{}}
placeholder="My nice TextArea"
errorMsg="The input is invalid"
/>