<label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
      name="basic"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="basic"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-secondary checked:bg-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:border-secondary-light dark:checked:bg-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="basic"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-info checked:bg-info hover:!border-info focus:!border-info dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-warning checked:bg-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:!border-error checked:bg-error hover:!border-error focus:!border-error dark:border-navy-400"
      name="basic"
      type="radio"
    />
    <p>Error</p>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:checked:border-navy-400 dark:checked:bg-navy-400"
      name="basic_filled"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-500 dark:bg-navy-900 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="basic_filled"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-secondary checked:bg-secondary hover:border-secondary focus:border-secondary dark:border-navy-500 dark:bg-navy-900 dark:checked:border-secondary-light dark:checked:bg-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="basic_filled"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-info checked:!bg-info hover:!border-info focus:!border-info dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-success checked:!bg-success hover:!border-success focus:!border-success dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-warning checked:!bg-warning hover:!border-warning focus:!border-warning dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 bg-slate-100 checked:!border-error checked:!bg-error hover:!border-error focus:!border-error dark:border-navy-500 dark:bg-navy-900"
      name="basic_filled"
      type="radio"
    />
    <p>Error</p>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      name="outline"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      name="outline"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="outline"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      name="outline"
      type="radio"
    />
    <p>Error</p>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      name="outline_filled"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      name="outline_filled"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="outline_filled"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-full border-slate-400/70 bg-slate-100 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-500 dark:bg-navy-900"
      name="outline_filled"
      type="radio"
    />
    <p>Error</p>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      name="outline_squircle"
      type="radio"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      name="outline_squircle"
      type="radio"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      name="outline_squircle"
      type="radio"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-outline size-5 rounded-md border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      name="outline_squircle"
      type="radio"
    />
    <p>Error</p>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      disabled
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:border-slate-300 disabled:opacity-60 dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      name="disabled"
      type="radio"
    />
    <p>Primary</p>
  </label>

  <label class="inline-flex items-center  space-x-2">
    <input
      disabled
      checked
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:border-slate-300 disabled:opacity-60 dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      name="disabled"
      type="radio"
    />
    <p>Primary</p>
  </label>

              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-radio is-basic size-3 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>1</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-3.5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>2</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-4 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>3</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-4.5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>4</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>5</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-radio is-basic size-6 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
      name="size"
      type="radio"
    />
    <p>6</p>
  </label>

              

                
  <div x-data="{selectedFruit: ['apple']}">
    <div class="inline-space">
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruit"
          value="apple"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
          name="model"
          type="radio"
        />
        <p>Apple</p>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruit"
          value="pineapple"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
          name="model"
          type="radio"
        />
        <p>PineApple</p>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruit"
          value="strawberry"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
          name="model"
          type="radio"
        />
        <p>Strawberry</p>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruit"
          value="orange"
          class="form-radio is-outline size-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
          name="model"
          type="radio"
        />
        <p>Orange</p>
      </label>
    </div>
    <p>Value <span x-text="selectedFruit"></span></p>
  </div>