Skip to content

Instantly share code, notes, and snippets.

@luandevpro
Created July 14, 2019 02:26
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save luandevpro/e4312f0917d5563a6fc21a33ea995826 to your computer and use it in GitHub Desktop.
...
export default () => {
const handleSubmit = values => {
console.log(values.languages);
};
return (
<Formik
onSubmit={handleSubmit}
initialValues={{
languages: [],
}}
>
{() => (
<Form>
<FieldArray name="languages">
{arrayHelpers => {
return languageState.map((language, index) => {
return (
<StyledWrap
key={index}
htmlFor={`languages.${index}.language`}
style={{ marginBottom: '10px' }}
>
<label htmlFor={`languages.${index}.language`}>
<input
id={`languages.${index}.language`}
type="radio"
name={`languages.${index}.language`}
value={language}
checked={arrayHelpers.form.values.languages.includes(language)}
onChange={e => {
if (e.target.checked && arrayHelpers.form.values.languages.length === 0)
arrayHelpers.push(language);
else {
arrayHelpers.replace(0, language);
}
}}
hidden
className="check-custom"
/>
<span className="check-toggle" />
<label style={{ marginLeft: '10px' }} htmlFor={`languages.${index}.language`}>
{language}
</label>
</label>
</StyledWrap>
);
});
}}
</FieldArray>
<br />
<button type="submit">submit</button>
</Form>
)}
</Formik>
);
};
const StyledWrap = styled.div`
/* Styles for hiding the native radio button */
input[type="radio"].check-custom {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Styles for the basic appearance of the custom radio button */
input[type="radio"].check-custom ~ .check-toggle {
width: 1.5rem;
height: 1.5rem;
position: relative;
display: inline-block;
vertical-align: middle;
border: 1px solid #969696;
border-radius: 50%;
cursor: pointer;
}
/* Styles for the hover state appearance of the custom radio button */
/* input[type="radio"].check-custom:hover ~ .check-toggle {
border: 2px solid #4a4a4a;
} */
/* Styles for the focus state appearance of the custom radio button */
input[type="radio"].check-custom:focus ~ .check-toggle {
/* border-color: #b0d5ff; */
/* box-shadow: 0 0 0 2px rgba(23, 133, 255, 0.25); */
}
/* Styles for the checked state appearance of the custom radio button */
input[type="radio"].check-custom:checked ~ .check-toggle {
border: 2px solid #1785ff;
}
/* Styles for the checked state appearance of the custom radio button */
input[type="radio"].check-custom:checked ~ .check-toggle::after {
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
height: 50%;
margin: auto;
position: absolute;
border-radius: 50%;
background: #1785ff;
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment