React-Formik-UI is a simple component library, composed out of pure HTML form elements like: form, input, select, checkbox, radio and textarea.
The Idea behind React-Formik-UI is to make the composition of forms with React and Formik even easier, so you don't have to write any HTML markup or extra components for your forms.
Each component makes use of Formiks context, there for you need to have Formik installed in your project.
- MODE option: The
themed
andstructured
props are obsolete and got replaced by themode
prop. Refer to Markup, Styling and ClassNames. - Dropzone: The
DropZone
component now handles 3 additional props :multiple
with default value set to true, if set to false it allows for single file upload only;withClearButton
that enables a Button for clearing out added files andclearButtonText
to set the text to shown on the Clear Button . - PhoneInput: Now supports the
withCountryMeta
prop , that returns an object not only with the phone number but also with the selected country information - className: The
className
Prop on each component now adds the css class directly to the component instead of the wrapper div, so libraries like Bootstrap can be used to style the form component. - Overall more stability and less bugs, as well as a complete rewrite of the css for better understanding of the code.
The markup for the components Input, PhoneInput, Select, Checkbox, Radio, Textarea, Datepicker and DropZone consists of a wrapper div, label, the main component, hint, and error message.
By default all component have NO styling applied at all.
This is intentionally, so you have the possibility to apply your own styling.
All the components used in the Form are scoped by the default classes, situated on the Form component, react-formik-ui form-wrapper
Each component has its corresponding component class (eg: PhoneInput component phoneInput
) followed a level deeper by its wrapper class (eg: phoneInput component phoneInput-wrapper
), as well as the class form-element
.
You can pass the style
prop on each component, to add custom inline styles to the component div for each component.
The className
Prop can be passed on each component to add a css class directly to the component instead of the wrapper div, so libraries like Bootstrap can be used to style the form component.
The Mode prop: If you pass the mode
prop to the Form
component with structured
as value, a minimal styling will be applied to add some structure to each form-element
.
In case you pass the value themed
through the mode
prop on the Form
component, the React-Formik-Ui Theme will be applied
- If you used the
structured
orthemed
prop on theForm
component you now need to change it tomode='structured'
ormode='themed'
. - In case you used custom css classes through the
className
prop, you might need to adjust some of your custom styles since theclassName
has been moved form the wrapper div to the main component.
Note: React Formik UI makes use of the recently released react Hooks
API, therefore make sure that your project uses the latest React
version
npm install --save react-formik-ui
If you like the project and want to support my work, you can buy me a coffee :)
React-Formik-UI has a Peer dependency of Formik.
This means that you need to add Formik to your project to make use of React-Formik-UI.
npm install --save formik
To validate the form fields, the use of Yup is recommended.
npm install --save yup
See the Styleguide with Demo and Examples here
- Form
- Autocomplete
- Input
- PhoneInput
- Select
- Radio
- Checkbox
- Textarea
- DatePicker
- DropZone
- Button
- Toggle
- SubmitBtn
- Complete Form Example
The Form component, like in a normal HTML form is the main wrapper for your form.
It renders with the classNames react-formik-ui
and form-wrapper
.
A custom class can be passed with the className
prop.
You don't need to pass an onSubmit
handler, since this is already handled under the hood.
Name | Type | Default | Description |
---|---|---|---|
className | string | null | Adds a custom class to the form |
mode | string | default | One of 'default', 'structured', 'themed' |
import React, { Component } from 'react'
import { Formik } from 'formik'
import { Form } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
render () {
return (
<Formik
initialValues={ /* inital values setup */ }
validationSchema={ /* validation schema setup */ }
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
</Form>
)}
/>
)
}
}
The Autocomplete component renders with the classNames form-element
and autocomplete-wrapper
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
name | string | Required | Sets the Name of the input field of the Autocomplete component |
suggestions | array | required | Array of suggestions to be searched in |
className | string | null | Adds a custom class to the input element of the Autocomplete component |
style | object | null | Adds a custom inline styles to the Autocomplete wrapper div |
disabled | boolean | false | Disables the Autocomplete |
hint | string | null | Sets a hint text after/below the Autocomplete Field |
id | string | null | Sets an Id for the Autocomplete Field, if not passed, the id will be the name |
label | string | null | Sets the main Label for the Autocomplete Field |
placeholder | string | null | Sets the Placeholder text |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Autocomplete, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
nameField: yup
.string()
.required('Name Is required'),
})
}
render () {
return (
<Formik
initialValues={{
searchFiled: ''
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Autocomplete
label='Search'
name="searchFiled"
suggestions={[
'Afghanistan',
'Aland Islands',
'Albania',
'Algeria',
'American Samoa',
'Andorra',
'Angola',
'Anguilla',
'Antarctica',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Aruba',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bermuda',
'Bhutan',
'Bolivia, Plurinational State of',
'Bonaire, Sint Eustatius and Saba',
'Bosnia and Herzegovina',
'Botswana',
'Bouvet Island',
'Brazil',
'British Indian Ocean Territory',
'Brunei Darussalam',
]}
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The Input component renders with the classNames form-element
and input-wrapper
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
className | string | null | Adds a custom class to the input element of the Input component |
style | object | null | Adds a custom inline styles to the Input wrapper div |
disabled | boolean | false | Disables the Input Field |
hint | string | null | Sets a hint text after/below the Input Field |
id | string | null | Sets an Id for the Input Field, if not passed, the id will be the name |
label | string | null | Sets the main Label for the Input Field |
name | string | Required | Sets the Name of the Input Field |
placeholder | string | null | Sets the Placeholder text |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
type | string | text | Defines the type of the Input Filed |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Input, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
nameField: yup
.string()
.required('Name Is required'),
})
}
render () {
return (
<Formik
initialValues={{
nameField: ''
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Input
name='nameField'
label='Input field main label'
placeholder='Your Name'
hint='This is a hint'
required
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The PhoneInput component renders with the classNames form-element
and phoneInput-wrapper
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
name | string | Required | Sets the Name of the Input Field |
id | string | null | Sets an Id for the Input Field, if not passed, the id will be the name |
className | string | null | Adds a custom class to the input/select element of the PhoneInput component |
label | string | null | Sets the main Label for the Input Field |
hint | string | null | Sets a hint text after/below the Input Field |
buttonFlagStyles | object | null | Style object that overrides the styles of the Flag shown in the button |
defaultCountry | string | null | Sets the default country (use iso alpha-2 country code e.g 'us', 'gb', 'fr') |
disabled | boolean | false | Disables the PhoneInput Field |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
format | string | 'INTERNATIONAL' | One of: 'INTERNATIONAL', 'NATIONAL'. Sets the format of the entered phone number, in case of 'NATIONAL' the defaultCountry must be set as well |
listFlagStyles | object | null | Style object that overrides the styles of the Flag shown in the country dropdown |
placeholder | string | null | Sets the Placeholder text |
preferredCountries | Array | null | Lets you restrict the country dropdown to a specific list of countries (use iso alpha-2 country code e.g 'us', 'gb', 'fr') |
regions | String / Array | [] | Lets you restrict the country dropdown to a list of countries in the specified regions |
style | object | null | Adds a custom inline styles to the Autocomplete wrapper div |
withCountryMeta | boolean | false |
changes the retuned value into an Object that contains the phone number and country meta information
eg.:
{ phoneNumber: '+49 176 12345678', country: { name: 'Germany (Deutschland)', iso2: 'de' } }In case of use the Formik initialValue for the PhoneInput needs to be an Object exactly like this: { phoneNumber: '', country: { name: '', iso2: '' } |
import { Formik } from 'formik'
import { Form, PhoneInput } from 'react-formik-ui';
<Formik
initialValues={{
phoneNr1: ''
}}
onSubmit={data => (alert(JSON.stringify(data)))}
render={() => (
<Form>
<PhoneInput
name='phoneNr1'
label='Phone Nr.'
placeholder='+1 702 123 4567'
hint='This is a hint'
/>
</Form>
)}
/>
The Select component renders with the classNames form-element
and select-wrapper
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
className | string | null | Adds a custom class to the select element of the Select component |
style | object | null | Adds a custom inline styles to the Select wrapper div |
disabled | boolean | false | Disables the Select Field |
hint | string | null | Sets a hint text after/below the Select component |
id | string | null | Sets an Id for the Select Field, if not passed, the id will be the name |
label | string | null | Sets the main Label for the Select Field |
name | string | Required | Sets the Name of the Select Field |
options | array | Required | Array in the shape of [ { value: string or number, label: string } ] |
placeholder | string | null | Sets a Placeholder as the first option with no value |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Select, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
dropdown: yup
.string(),
})
}
render () {
return (
<Formik
initialValues={{
dropdown: ''
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Select
name='dropdown'
label='Select options main label'
placeholder='Select an Option'
options={[
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]}
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The Radio component renders with the classNames form-element
and radio-wrapper
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
className | string | null | Adds a custom class to each input element of the Radio component |
style | object | null | Adds a custom inline styles to the Radio wrapper div |
disabled | boolean | false | Disables the Radio Fields |
inline | boolean | false | Displays the radio option inline from left to right |
hint | string | null | Sets a hint text after/below the Radio component |
label | string | null | Sets the main Label for the Radio Fields |
name | string | Required | Sets the Name of the Radio Fields |
options | array | Required | Array in the shape of [ { value: string or number, label: string } ] |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Radio, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
radioOptions: yup
.string(),
})
}
render () {
return (
<Formik
initialValues={{
radioOptions: ''
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Radio
name='radioOptions'
label='Radio options main label'
options={[
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]}
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The Checkbox component renders with the classNames form-element
and checkbox-wrapper
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
className | string | null | Adds a custom class to the input element of the Checkbox component |
style | object | null | Adds a custom inline styles to the Checkbox wrapper div |
disabled | boolean | false | Disables the Checkbox |
hint | string | null | Sets a hint text after/below the Checkbox |
id | string | null | Sets an Id for the Checkbox, if not passed, the id will be the name |
label | string | null | Sets the main Label for the Checkbox |
name | string | Required | Sets the Name of the Checkbox |
required | boolean | false | Sets the Checkbox as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
text | string / node | null | Sets the text shown beside the checkbox |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Checkbox, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
agreement: yup
.boolean(),
})
}
render () {
return (
<Formik
initialValues={{
agreement: false
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Checkbox
name='agreement'
label='Checkbox main label'
text='Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The Textarea component renders with the classNames form-element
and textarea-wrapper
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
className | string | null | Adds a custom class to the textarea element of the Textarea component |
style | object | null | Adds a custom inline styles to the Textarea wrapper div |
disabled | boolean | false | Disables the Textarea |
hint | string | null | Sets a hint text after/below the Textarea |
id | string | null | Sets an Id for the Textarea, if not passed, the id will be the name |
label | string | null | Sets the main Label for the Textarea |
name | string | Required | Sets the Name of the Textarea |
placeholder | string | null | Sets the Placeholder text |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Textarea, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
comment: yup
.string(),
})
}
render () {
return (
<Formik
initialValues={{
comment: ''
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Textarea
name='comment'
label='Write a comment'
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The Datepicker component uses ReactJS Datepicker under the hood.
It renders with the classNames form-element
and datePicker-wrapper
.
A custom class can be passed through the className
prop.
For additional configuration options and layouts, please refer to ReactJS Datepicker.
You can then pass the desired configuration as props just like you would on ReactJS Datepicker.
Name | Type | Default | Description |
---|---|---|---|
id | string | null | Sets an Id for the Datepicker, if not passed, the id will be the name |
className | string | null | Adds a custom class to the React-Datepicker component |
style | object | null | Adds a custom inline styles to the Datepicker wrapper div |
dateFormat | string / Array of strings | dd.MM.yyyy | Sets the desired date format. |
disabled | boolean | false | Disables the Datepicker Field |
hint | string | null | Sets a hint text after/below the Datepicker Field |
label | string | null | Sets the main Label for the Datepicker Field |
name | string | Required | Sets the Name of the Datepicker Field |
placeholder | string | null | Sets the Placeholder text |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Datepicker, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
birthday: yup
.date(),
})
}
render () {
return (
<Formik
initialValues={{
birthday: ''
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Datepicker
name='birthday'
label='Birthdate'
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The DropZone component uses react-dropzone under the hood.
It renders with the classNames form-element
and dropzone-wrapper
.
A custom class can be passed through the className
prop.
For additional configuration options and layouts, please refer to react-dropzone.
Name | Type | Default | Description |
---|---|---|---|
accept | string | image/* | Allow specific types of files. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: react-dropzone/react-dropzone#276 |
name | string | Required | Sets the Name of the DropZone Field |
id | string | null | Sets an Id for the DropZone Field, if not passed, the id will be the name |
className | string | null | Adds a custom class to the React-DropZone component |
style | object | null | Adds a custom inline styles to the Dropzone wrapper div |
disabled | boolean | false | Disables the DropZone Field |
disabledText | string | File upload disabled | text shown as placeholder if DropZone is disabled |
fileInfo | boolean | false | Shows the number of accepted and rejected files after each drop |
hint | string | null | Sets a hint text after/below the DropZone Field |
label | string | null | Sets the main Label for the DropZone Field |
placeholder | string | Drop some files here. | Sets the Placeholder text |
required | boolean | false | Sets the field as required, if label is passed, an * is added to the end of the main label. Validation will only work if you pass the required() method in the yup validation schema |
zoneActiveText | string | Drop file(s) here | Sets the text to be shown when dragging files over the drop zone |
withClearButton | boolean | false | Enables a Clear button below the Dropbox, that enables you to clear out all the files you added to the Dropbox |
clearButtonText | string | Clear Files | Sets the text to be shown on the Clear Button |
multiple | boolean | true | Allow drag 'n' drop (or selection from the file dialog) of multiple files. Set to false to enable Single file upload |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, DropZone, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
files: yup
.array()
})
}
render () {
return (
<Formik
initialValues={{
files: []
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<DropZone
name='files'
label='Image upload'
/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The Button component renders with the className btn
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
children | string / node | null | Renders the children passed to the button |
className | string | null | Adds a custom class to the button |
disabled | boolean | false | Disables the button |
onClick | function | Required | Sets the onClick handler for the button |
type | string | button | Sets the type for the button |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Button } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
render () {
return (
<Formik
initialValues={ /* inital values setup */ }
validationSchema={ /* validation schema setup */ }
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Button onClick={(() => alert('Cancel'))}>
Cancel
</Button>
</Form>
)}
/>
)
}
}
The Toggle button component, is the only component so far who has its own styling.
Since it uses the Button component, it renders with the classNames btn
and also toggle-btn
.
A custom class can be passed through the className
prop.
Name | Type | Default | Description |
---|---|---|---|
id | string | null | Sets an Id for the Toggle button, if not passed, the id will be the name |
className | string | null | Adds a custom class to the Toggle button wrapper-div |
style | object | null | Adds a custom inline styles to the Toggle switch wrapper div |
disabled | boolean | false | Disables the Toggle button |
name | string | Required | Sets the Name of the Toggle button |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, Toggle, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
// example of validation with yup
getSchema = () => {
return yup.object().shape({
toggleBtn: yup
.boolean(),
})
}
render () {
return (
<Formik
initialValues={{
toggleBtn: false
}}
validationSchema={this.getSchema}
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<Toggle name='toggleBtn'/>
<SubmitBtn />
</Form>
)}
/>
)
}
}
The SubmitBtn component renders with the classNames btn
and submit-btn
.
A custom class can be passed through the className
prop.
By default the SubmitBtn handles the submission, no further handler or configuration is needed.
Name | Type | Default | Description |
---|---|---|---|
className | string | null | Adds a custom class to the SubmitBtn |
disabled | boolean | false | Disables the SubmitBtn |
text | string / node | Submit | Sets the text shown on the SubmitBtn |
type | string | submit | Sets the type for the SubmitBtn |
import React, { Component } from 'react'
import { Formik } from 'formik'
import * as yup from 'yup';
import { Form, SubmitBtn } from 'react-formik-ui'
class Example extends Component {
onSubmit = data => {
// here you handle the data to be submitted
}
render () {
return (
<Formik
initialValues={ /* inital values setup */ }
validationSchema={ /* validation schema setup */ }
onSubmit={this.onSubmit}
render={() => (
<Form mode='structured'>
<SubmitBtn />
</Form>
)}
/>
)
}
}
MIT © KaiHotz