Skip to content

Instantly share code, notes, and snippets.

@ajess33

ajess33/radioToggle.js

Last active Mar 18, 2020
Embed
What would you like to do?
// 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