https://github.com/ehsan-shv/react-formik-components
React reusable and customizable input components based on formik library
https://github.com/ehsan-shv/react-formik-components
formik reactjs validation yup
Last synced: about 2 months ago
JSON representation
React reusable and customizable input components based on formik library
- Host: GitHub
- URL: https://github.com/ehsan-shv/react-formik-components
- Owner: ehsan-shv
- Created: 2021-08-09T18:36:26.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-12T19:28:05.000Z (almost 5 years ago)
- Last Synced: 2025-09-15T05:33:56.182Z (9 months ago)
- Topics: formik, reactjs, validation, yup
- Language: JavaScript
- Homepage:
- Size: 1.91 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-formik-components
[](https://badge.fury.io/js/react-formik-components)
React reusable and customizable input components based on [formik](https://formik.org/docs/api/formik) library.
**include:**
- text input
- number input
- password input
- textarea input
- select (based on [react-select](https://github.com/JedWatson/react-select))
- checkbox
- radiobutton
## Getting Started:
**install formik:**
$ npm install formik --save
**install react-formik-components:**
$ npm i react-formik-components
**you can install [yup](https://github.com/jquense/yup) for value parsing and validation.**
**install yup:**
$ npm install -S yup
## text input, number input, password input and textarea:
import { Formik, Form, Field } from 'formik'
import * as Yup from 'yup'
import { FormikInput } from 'react-formik-components'
const formSchema = Yup.object().shape({
username: Yup.string().required('Username Required'),
password: Yup.string()
.max(10, 'Too Long! Max 10 Char')
.min(5, 'Too Short! Min 5 Char')
.required('Password Required'),
count: Yup.number().required('Count Required'),
message: Yup.string().required('message Required'),
})
const Form = () => {
return (
{
console.log(values)
//set status
actions.setStatus({})
}}
>
{() => (
Submit
)}
)
}
export default Form
## select:
import { Formik, Form } from 'formik'
import * as Yup from 'yup'
import { FormikSelect } from 'react-formik-components'
const job = {
name: 'job',
items: [
{ value: 'developer', label: 'Software Developer' },
{ value: 'chef', label: 'Chef' },
{ value: 'enginner', label: 'Enginner' },
{ value: 'painter', label: 'Painter' },
],
}
const jobs = {
name: 'jobs',
items: [
{ value: 'developer', label: 'Developer' },
{ value: 'chef', label: 'Chef' },
{ value: 'enginner', label: 'Enginner' },
{ value: 'painter', label: 'Painter' },
],
}
const FormSchema = Yup.object().shape({
job: Yup.object()
.shape({
label: Yup.string(),
value: Yup.string(),
})
.nullable()
.required('job is required'),
jobs: Yup.array()
.min(1, 'Select at least one field')
.of(
Yup.object()
.shape({
label: Yup.string(),
value: Yup.string(),
})
.nullable()
),
})
const Form = () => {
return (
{
console.log(values)
//set status
actions.setStatus({ })
}}
>
{({
values,
setFieldValue,
setFieldTouched,
touched,
errors,
status,
}) => (
Submit
)}
)
}
export default Form
## checkbox:
import { Formik, Form, Field, FieldArray } from 'formik'
import * as Yup from 'yup'
import { FormikCheckBox } from 'react-formik-components'
const categories = {
name: 'categories',
items: ['React', 'Vue', 'Angular', 'Svelt'],
}
const Form = () => {
return (
{
console.log(values)
//set status
actions.setStatus({ })
}}
>
{() => (
categories.items.map((item, index) => {
return (
{
return (
)
}}
/>
)
})
}
/>
Submit
)}
)
}
export default Form
## radiobutton:
import { Formik, Form, Field, FieldArray } from 'formik'
import { FormikRadioButton } from 'react-formik-components'
const position = {
name: 'position',
items: ['Fron-end', 'Back-end', 'Full-stack'],
}
const Form = () => {
return (
{
console.log(values)
//set status
actions.setStatus({ })
}}
>
{() => (
position.items.map((item, index) => {
return (
{
return (
)
}}
/>
)
})
}
/>
Submit
)}
)
}
export default Form
## styles:
just change value or overwrite in your css.
:root {
// font size
--react-formik-components-font-size: 1rem;
// colors
--react-formik-components-color-white: #ffffff;
--react-formik-components-color: #212121;
--react-formik-components-border-color: #bdbdbd;
--react-formik-components-radio-button-fill-color: #1976d2;
--react-formik-components-error-color: #d32f2f;
// border-radius
--react-formik-components-border-radius: 0;
// label
--react-formik-components-label-padding-x-start: 24px;
--react-formik-components-label-before-position-x-start: 0;
--react-formik-components-label-before-position-y-start: 2px;
--react-formik-components-label-width: 16px;
--react-formik-components-label-height: 16px;
// checkbox label
--react-formik-components-checkbox-label-background-size: 16px;
--react-formik-components-checkbox-label-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
// radiobutton
--react-formik-components-radio-label-background-size: 12px;
--react-formik-components-radio-label-background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='12' fill='%231976d2'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
// input
--react-formik-components-input-height: 40px;
--react-formik-components-input-textarea-height: 80px;
--react-formik-components-input-margin-y: 8px 0;
//select
--react-formik-components-select-min-height: 40px;
//inline
--react-formik-components-inline-margin-x: 16px;
}