can/demos/forms/elements-radio-equal.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<style>
label {
	display: block;
}
</style>

<checkbox-equal></checkbox-equal>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { stacheConverters, StacheElement } from "can";

class CheckboxEqual extends StacheElement {
    static view = `
        <label>
            <input type="radio" checked:bind="equal(this.favoriteColor, 'Red')">
            Red
        </label>
        <label>
            <input type="radio" checked:bind="equal(this.favoriteColor, 'Blue')">
            Blue
        </label>
        <label>
            <input type="radio" checked:bind="equal(this.favoriteColor, 'Green')">
            Green
        </label>
        <label>
            <input type="radio" checked:bind="equal(this.favoriteColor, 'Yellow')">
            Yellow
        </label>
        <label>
            Favorite color: {{ this.favoriteColor }}
        </label>
    `;

    static props = {
        favoriteColor: ""
    };
};
customElements.define("checkbox-equal", CheckboxEqual);
</script>