Created
July 14, 2019 02:26
Star
You must be signed in to star a gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
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