<div class="relative flex justify-center gap-4">
  <div class="flex flex-col gap-6">
    <div class="custom-radio">
      <input type="radio" id="default" name="color" />
      <label for="default">Default</label>
    </div>
    <div class="custom-radio">
      <input type="radio" id="primary" name="color" />
      <label for="primary" class="primary">Primary</label>
    </div>
    <!-- secondary -->
    <div class="custom-radio">
      <input type="radio" id="secondary" name="color" />
      <label for="secondary" class="secondary">Secondary</label>
    </div>
    <div class="custom-radio">
      <input type="radio" id="info" name="color" />
      <label for="info" class="info">Info</label>
    </div>
    <div class="custom-radio">
      <input type="radio" id="success" name="color" />
      <label for="success" class="success">Success</label>
    </div>
    <div class="custom-radio">
      <input type="radio" id="error" name="color" />
      <label for="error" class="error">Error</label>
    </div>
    <div class="custom-radio">
      <input type="radio" id="disabled" name="color" disabled />
      <label for="disabled" class="disabled">Disabled</label>
    </div>
  </div>
</div>
                  

<div class="relative flex justify-center gap-4">
  <div class="flex gap-6">
    <label for="big" class="flex items-center gap-2 top-radio">
      <input type="radio" id="big" name="size" class="sr-only peer/top" />
      <span
        class="circle !size-7 peer-checked/top:after:absolute peer-checked/top:after:size-2 peer-checked/top:after:block peer-checked/top:after:rounded-full peer-checked/top:after:left-1/2 peer-checked/top:after:top-1/2 peer-checked/top:after:-translate-y-1/2 peer-checked/top:after:-translate-x-1/2 peer-checked/top:after:bg-neutral-700 dark:peer-checked/top:after:bg-neutral-20"
      ></span>
      <span>Large</span>
    </label>
    <label for="medium" class="flex items-center gap-2 top-radio">
      <input type="radio" id="medium" name="size" class="sr-only peer/top" />
      <span
        class="circle peer-checked/top:after:absolute peer-checked/top:after:size-1.5 peer-checked/top:after:block peer-checked/top:after:rounded-full peer-checked/top:after:left-1/2 peer-checked/top:after:top-1/2 peer-checked/top:after:-translate-y-1/2 peer-checked/top:after:-translate-x-1/2 peer-checked/top:after:bg-neutral-700 dark:peer-checked/top:after:bg-neutral-20"
      ></span>
      <span>Medium</span>
    </label>
    <label for="small" class="flex items-center gap-2 top-radio">
      <input type="radio" id="small" name="size" class="sr-only peer/top" />
      <span
        class="circle !size-4 !border peer-checked/top:after:absolute peer-checked/top:after:size-1 peer-checked/top:after:block peer-checked/top:after:rounded-full peer-checked/top:after:left-1/2 peer-checked/top:after:top-1/2 peer-checked/top:after:-translate-y-1/2 peer-checked/top:after:-translate-x-1/2 peer-checked/top:after:bg-neutral-700 dark:peer-checked/top:after:bg-neutral-20"
      ></span>
      <span>Small</span>
    </label>
  </div>
</div>
                  

<div class="relative flex justify-center gap-4">
  <div class="flex gap-6 items-center">
    <label for="top" class="flex items-center flex-col gap-2 top-radio">
      <input type="radio" id="top" name="position" class="sr-only peer/top" />
      <span>Top</span>
      <span
        class="circle peer-checked/top:after:absolute peer-checked/top:after:size-1.5 peer-checked/top:after:block peer-checked/top:after:rounded-full peer-checked/top:after:left-1/2 peer-checked/top:after:top-1/2 peer-checked/top:after:-translate-y-1/2 peer-checked/top:after:-translate-x-1/2 peer-checked/top:after:bg-neutral-700 dark:peer-checked/top:after:bg-neutral-20"
      ></span>
    </label>
    <label for="start" class="flex items-center gap-2 top-radio">
      <input type="radio" id="start" name="position" class="sr-only peer/top" />
      <span
        class="circle peer-checked/top:after:absolute peer-checked/top:after:size-1.5 peer-checked/top:after:block peer-checked/top:after:rounded-full peer-checked/top:after:left-1/2 peer-checked/top:after:top-1/2 peer-checked/top:after:-translate-y-1/2 peer-checked/top:after:-translate-x-1/2 peer-checked/top:after:bg-neutral-700 dark:peer-checked/top:after:bg-neutral-20"
      ></span>
      <span>Start</span>
    </label>
    <label for="end" class="flex items-center gap-2 top-radio">
      <input type="radio" id="end" name="position" class="sr-only peer/top" />
      <span>End</span>
      <span
        class="circle peer-checked/top:after:absolute peer-checked/top:after:size-1.5 peer-checked/top:after:block peer-checked/top:after:rounded-full peer-checked/top:after:left-1/2 peer-checked/top:after:top-1/2 peer-checked/top:after:-translate-y-1/2 peer-checked/top:after:-translate-x-1/2 peer-checked/top:after:bg-neutral-700 dark:peer-checked/top:after:bg-neutral-20"
      ></span>
    </label>
    <label for="bottom" class="flex items-center flex-col gap-2 top-radio">
      <input type="radio" id="bottom" name="position" class="sr-only peer/top" />
      <span
        class="circle peer-checked/top:after:absolute peer-checked/top:after:size-1.5 peer-checked/top:after:block peer-checked/top:after:rounded-full peer-checked/top:after:left-1/2 peer-checked/top:after:top-1/2 peer-checked/top:after:-translate-y-1/2 peer-checked/top:after:-translate-x-1/2 peer-checked/top:after:bg-neutral-700 dark:peer-checked/top:after:bg-neutral-20"
      ></span>
      <span>Bottom</span>
    </label>
  </div>
</div>