// React State | |
const [fileView, setFileView] = useState('SELECTED'); | |
// this is our onChange handler | |
const toggleAll = e => { | |
setFileView(e.target.value); | |
}; | |
// JSX | |
<header className="files-toggle"> | |
<input | |
onChange={e => toggleAll(e)} | |
checked={fileView === "ALL"} | |
value="ALL" | |
type="radio" | |
id="all-radio" | |
name="header-radio" | |
/> | |
<label | |
className={selectedPackages.length ? "" : "radio-disabled"} | |
htmlFor="all-radio" | |
> | |
All | |
</label> | |
<input | |
onChange={e => toggleAll(e)} | |
checked={fileView === "SELECTED"} | |
value="SELECTED" | |
type="radio" | |
id="selected-radio" | |
name="header-radio" | |
/> | |
<label htmlFor="selected-radio">Selected</label> | |
</header> | |
// STYLES | |
label { | |
width: 50%; | |
border: 2px solid #4d5864; | |
height: 100%; | |
box-sizing: border-box; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
font-size: 0.9rem; | |
color: white; | |
cursor: pointer; | |
&:disabled { | |
opacity: 0.5; | |
cursor: default; | |
} | |
} | |
.radio-disabled { | |
opacity: 0.5; | |
cursor: default; | |
} | |
input[type="radio"] { | |
position: absolute; | |
top: -9999px; | |
left: -9999px; | |
} | |
input[type="radio"]:checked ~ label { | |
background-color: $fabBlue; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment