import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';
import styled from 'styled-components';
const languageState = [true];
export default () => {
const handleSubmit = values => {
console.log(values.languages);
};
return (
<Formik
onSubmit={handleSubmit}
initialValues={{
languages: [true],
}}
>
{() => (
<Form>
<FieldArray name="languages">
{arrayHelpers => (
<StyledWrap htmlFor="languages" style={{ marginBottom: '10px', marginLeft: '100px' }}>
<label htmlFor="languages">
<input
id="languages"
type="checkbox"
name="languages"
value={languageState[0]}
checked={arrayHelpers.form.values.languages.includes(languageState[0])}
onChange={e => {
if (e.target.checked) arrayHelpers.replace(0, true);
else {
arrayHelpers.replace(0, false);
}
}}
hidden
className="check-custom toggle-switch"
/>
<span className="check-toggle" />
<label style={{ marginLeft: '10px' }} htmlFor="languages">
languages
</label>
</label>
</StyledWrap>
)}
</FieldArray>
<br />
<button type="submit">submit</button>
</Form>
)}
</Formik>
);
};
const StyledWrap = styled.div`
/* Styles for hiding the native checkbox */
input[type='checkbox'].check-custom {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Styles for the basic appearance of the toggle switch */
input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
width: 2.5rem;
height: 1.5rem;
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
/* Common styles for the ::before and ::after pseudo-elements of the toggle switch */
input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle,
input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
&::before {
content: '';
top: 0;
left: 0;
position: absolute;
}
&::after {
content: '';
top: 0;
left: 0;
position: absolute;
}
}
/* Styles for the ::before pseudo-element (the outer frame) of the toggle switch */
input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
&::before {
width: 100%;
height: 100%;
border-radius: 1rem;
background: #dbdbdb;
}
}
/* Styles for the ::after pseudo-element (the inner slider) of the toggle switch */
input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
&::after {
width: 1.1rem;
height: 1.1rem;
margin: 3px 5px;
border-radius: 50%;
background: #ffffff;
}
}
/* Styles for the ::before pseudo-element of the toggle switch in hover state */
input[type='checkbox'].check-custom.toggle-switch:hover ~ .check-toggle {
&::before {
background: #c4c4c4;
}
}
/* Styles for the ::before pseudo-element of the toggle switch in focus state */
input[type='checkbox'].check-custom.toggle-switch:focus ~ .check-toggle {
&::before {
box-shadow: 0 0 0 2px rgba(23, 133, 255, 0.5);
}
}
/* Styles for the ::before pseudo-element of the toggle switch in both focus and checked or enabled state */
input[type='checkbox'].check-custom.toggle-switch:focus:checked ~ .check-toggle {
&::before {
box-shadow: 0 0 0 2px rgba(97, 191, 158, 0.5);
}
}
/* Styles for the ::before pseudo-element of the toggle switch in checked or enabled state */
input[type='checkbox'].check-custom.toggle-switch:checked ~ .check-toggle {
&::before {
background: #61bf9e;
}
}
/* Styles for the ::after pseudo-element of the toggle switch in checked or enabled state */
input[type='checkbox'].check-custom.toggle-switch:checked ~ .check-toggle {
&::after {
left: auto;
right: 0;
}
}
`;
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.