Radio Group

<div class="grid gap-2.5">
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio" id="radio_1" name="level" value="1"><label class="mv-label" for="radio_1">Beginner</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio" id="radio_2" name="level" checked value="2"><label class="mv-label" for="radio_2">Intermediate</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio" id="radio_3" name="level" value="3"><label class="mv-label" for="radio_3">Beginner</label>
  </div>
</div>

<div class="grid gap-2.5">
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio" id="radio_1" name="level" value="1"><label class="mv-label" for="radio_1">Beginner</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio" id="radio_2" name="level" checked value="2"><label class="mv-label" for="radio_2">Intermediate</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio" disabled id="radio_3" name="level" value="3"><label class="mv-label" for="radio_3">Beginner</label>
  </div>
</div>

<div class="grid gap-2.5">
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio mv-radio-mono" id="radio_1" name="level" value="1"><label class="mv-label" for="radio_1">Beginner</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio mv-radio-mono" id="radio_2" name="level" checked value="2"><label class="mv-label" for="radio_2">Intermediate</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio mv-radio-mono" id="radio_3" name="level" value="3"><label class="mv-label" for="radio_3">Beginner</label>
  </div>
</div>

<div class="grid gap-2.5">
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio mv-radio-sm" id="radio_1" name="level" value="1"><label class="mv-label" for="radio_1">Small</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio" id="radio_2" name="level" checked value="2"><label class="mv-label" for="radio_2">Default</label>
  </div>
  <div class="flex items-center gap-2.5">
    <input type="radio" class="mv-radio mv-radio-lg" id="radio_3" name="level" value="3"><label class="mv-label" for="radio_3">Large</label>
  </div>
</div>

<form class="mv-form">
  <div class="mv-form-item">
    <div class="mv-form-control mb-1">
      <div class="grid gap-2.5">
        <div class="flex items-center gap-2.5">
          <input type="radio" class="mv-radio" id="radio_1" name="level" value="1"><label class="mv-label" for="radio_1">Beginner</label>
        </div>
        <div class="flex items-center gap-2.5">
          <input type="radio" class="mv-radio" id="radio_2" name="level" checked value="2"><label class="mv-label" for="radio_2">Intermediate</label>
        </div>
        <div class="flex items-center gap-2.5">
          <input type="radio" class="mv-radio" id="radio_3" name="level" value="3"><label class="mv-label" for="radio_3">Beginner</label>
        </div>
      </div>
    </div>
    <div class="mv-form-description">Please select your level</div>
    <div class="mv-form-message">You need to select your level</div>
  </div>
  <div class="mv-form-actions justify-start">
    <button type="reset" class="mv-btn mv-btn-outline">Reset</button><button type="submit" class="mv-btn">Submit</button>
  </div>
</form>