React, Vue and Svelte: Comparing Radio Binding

Input Radio Binding in...

Easy peasy ! Radio binding in any framework is really easy. Vue and Svelte continue with their magic :)

Check it out 🚀

React

Live Example

const [picked, setPicked] = useState<string>('React');

  const handleChange = ({
    target: { value },
  }: React.ChangeEvent<HTMLInputElement>) => {
    setPicked(value);
  };

<section>
 <h2>Radio</h2>
  <input
    type="radio"
    id="react"
    value="React"
    name="picked"
    defaultChecked={true}
    onChange={handleChange}
  />
  <label htmlFor="react">React</label>
  <br />
  <input
    type="radio"
    id="vue"
    value="Vue"
    name="picked"
    onChange={handleChange}
  />
  <label htmlFor="vue">Vue</label>
  <br />
  <span>Picked: {picked}</span>
</section>

Vue

Live Example

const picked = ref('react');

<section>
  <h2>Radio</h2>
  <input
    type="radio"
    id="react"
    value="react"
    v-model="picked"
    checked="true"
  />
  <label for="react">React</label>
  <br />
  <input
    type="radio"
    id="vue"
    value="vue"
    v-model="picked"
  />
  <label for="vue">Vue</label>
  <br />
  <span>Picked: {{ picked }}</span>
</section>

Svelte

Live Example

let frameworks: string = 'React';

<section>
    <h2>Radio</h2>
    <input
      type="radio"
      bind:group={frameworks}
      id="react"
      value={'React'}
    />
    <label for="react">React</label>
    <br />
    <input
      type="radio"
      bind:group={frameworks}
      id="vue"
      value={'Vue'}
    />
    <label for="vue">Vue</label>
    <br/>
    <span>Picked: {frameworks}</span>
</section>