Radio

<label class="zui-radio">
<input type="radio" name="fruit" value="apple" checked />
Apple
</label>
<label class="zui-radio">
<input type="radio" name="fruit" value="banana" />
Banana
</label>
<label class="zui-radio">
<input type="radio" name="fruit" value="cherry" />
Cherry
</label>

import { Radio } from '@mrmartineau/zui/react'

<Radio name="fruit" value="apple" defaultChecked>Apple</Radio>
<Radio name="fruit" value="banana">Banana</Radio>
<Radio name="fruit" value="cherry">Cherry</Radio>

---
import { Radio } from '@mrmartineau/zui/astro'
---

<Radio name="fruit" value="apple" checked>Apple</Radio>
<Radio name="fruit" value="banana">Banana</Radio>
<Radio name="fruit" value="cherry">Cherry</Radio>

import { Radio } from '@mrmartineau/zui/solid'

<Radio name="fruit" value="apple" defaultChecked>Apple</Radio>
<Radio name="fruit" value="banana">Banana</Radio>
<Radio name="fruit" value="cherry">Cherry</Radio>

<script lang="ts">
import { Radio } from '@mrmartineau/zui/svelte'
let fruit = $state('apple')
</script>

<Radio name="fruit" value="apple" bind:group={fruit}>Apple</Radio>
<Radio name="fruit" value="banana" bind:group={fruit}>Banana</Radio>
<Radio name="fruit" value="cherry" bind:group={fruit}>Cherry</Radio>

<template>
<Radio name="fruit" value="apple" checked>Apple</Radio>
<Radio name="fruit" value="banana">Banana</Radio>
<Radio name="fruit" value="cherry">Cherry</Radio>
</template>

<script setup>
import { Radio } from '@mrmartineau/zui/vue'
</script>

<fieldset>
<legend class="zui-label">Favourite colour</legend>
<div class="zui-radio-list">
  <label class="zui-radio">
    <input type="radio" name="colour" value="red" />
    Red
  </label>
  <label class="zui-radio">
    <input type="radio" name="colour" value="blue" checked />
    Blue
  </label>
  <label class="zui-radio">
    <input type="radio" name="colour" value="green" />
    Green
  </label>
</div>
</fieldset>

import { Radio, Label } from '@mrmartineau/zui/react'

<fieldset>
<Label as="legend">Favourite colour</Label>
<div className="zui-radio-list">
  <Radio name="colour" value="red">Red</Radio>
  <Radio name="colour" value="blue" defaultChecked>Blue</Radio>
  <Radio name="colour" value="green">Green</Radio>
</div>
</fieldset>

---
import { Radio, Label } from '@mrmartineau/zui/astro'
---

<fieldset>
<Label>Favourite colour</Label>
<div class="zui-radio-list">
  <Radio name="colour" value="red">Red</Radio>
  <Radio name="colour" value="blue" checked>Blue</Radio>
  <Radio name="colour" value="green">Green</Radio>
</div>
</fieldset>

import { Radio, Label } from '@mrmartineau/zui/solid'

<fieldset>
<Label as="legend">Favourite colour</Label>
<div class="zui-radio-list">
  <Radio name="colour" value="red">Red</Radio>
  <Radio name="colour" value="blue" defaultChecked>Blue</Radio>
  <Radio name="colour" value="green">Green</Radio>
</div>
</fieldset>

<script lang="ts">
import { Radio, Label } from '@mrmartineau/zui/svelte'
let colour = $state('blue')
</script>

<fieldset>
<Label>Favourite colour</Label>
<div class="zui-radio-list">
  <Radio name="colour" value="red" bind:group={colour}>Red</Radio>
  <Radio name="colour" value="blue" bind:group={colour}>Blue</Radio>
  <Radio name="colour" value="green" bind:group={colour}>Green</Radio>
</div>
</fieldset>

<template>
<fieldset>
<Label as="legend">Favourite colour</Label>
<div class="zui-radio-list">
  <Radio name="colour" value="red">Red</Radio>
  <Radio name="colour" value="blue" checked>Blue</Radio>
  <Radio name="colour" value="green">Green</Radio>
</div>
</fieldset>
</template>

<script setup>
import { Radio, Label } from '@mrmartineau/zui/vue'
</script>

<label class="zui-radio">
<input type="radio" name="disabled" disabled checked />
Disabled checked
</label>
<label class="zui-radio">
<input type="radio" name="disabled2" disabled />
Disabled unchecked
</label>

import { Radio } from '@mrmartineau/zui/react'

<Radio name="disabled" disabled defaultChecked>Disabled checked</Radio>
<Radio name="disabled2" disabled>Disabled unchecked</Radio>

---
import { Radio } from '@mrmartineau/zui/astro'
---

<Radio name="disabled" disabled checked>Disabled checked</Radio>
<Radio name="disabled2" disabled>Disabled unchecked</Radio>

import { Radio } from '@mrmartineau/zui/solid'

<Radio name="disabled" disabled defaultChecked>Disabled checked</Radio>
<Radio name="disabled2" disabled>Disabled unchecked</Radio>

<script lang="ts">
import { Radio } from '@mrmartineau/zui/svelte'
</script>

<Radio name="disabled" disabled checked>Disabled checked</Radio>
<Radio name="disabled2" disabled>Disabled unchecked</Radio>

<template>
<Radio name="disabled" disabled checked>Disabled checked</Radio>
<Radio name="disabled2" disabled>Disabled unchecked</Radio>
</template>

<script setup>
import { Radio } from '@mrmartineau/zui/vue'
</script>