Checkbox Binding in...
You should not fear checkbox binding in any of these frameworks. At least, one checkbox is easy to handle :)
But as we delve deeper into Form Binding, you'll see that Vue and Svelte offer something fluid.
Check it out 🚀
React
const [checked, setChecked] = useState<boolean>(false);
const handleCheckbox = () => setChecked(!checked);
<section>
<h2>Checkbox</h2>
<input
type="checkbox"
id="checkbox"
checked={checked}
onChange={handleCheckbox}
/>
<label for="checkbox">Checked: {checked.toString()}</label>
</section>
Vue
const checked: Ref<boolean> = ref(false);
<section>
<h2>Checkbox</h2>
<input type="checkbox" id="checkbox" v-model="checked" />
<label htmlFor="checkbox">Checked: {checked.toString()}</label>
</section>
Svelte
let checked: boolean = false;
<section>
<h2>Checkbox</h2>
<input type="checkbox" id="checkbox" bind:checked={checked} />
<label for="checkbox">Checked: {checked}</label>
</section>
Top comments (0)