<div class="radio-group inline">
  <label class="radio">
  <input type="radio"
    name="billing"
    value="monthly"
    checked
    >
  <span class="radio-dot"></span>
  Mensual
</label>
  <label class="radio">
  <input type="radio"
    name="billing"
    value="annual"
    
    >
  <span class="radio-dot"></span>
  Anual
</label>
  <label class="radio">
  <input type="radio"
    name="billing"
    value="custom"
    
    >
  <span class="radio-dot"></span>
  Personalizado
</label>
</div>

{% from "radio.jinja" import radio %}
<div class="radio-group inline">
  {{ radio("Mensual", "billing", value="monthly", checked=True) }}
  {{ radio("Anual", "billing", value="annual") }}
  {{ radio("Personalizado", "billing", value="custom") }}
</div>

<div class="radio-group inline">
  <Radio label="Mensual" value="monthly" checked />
  <Radio label="Anual" value="annual" />
  <Radio label="Personalizado" value="custom" />
</div>

<div class="radio-group">
  <label class="radio">
  <input type="radio"
    name="pay"
    value="card"
    checked
    >
  <span class="radio-dot"></span>
  Tarjeta de crédito
</label>
  <label class="radio">
  <input type="radio"
    name="pay"
    value="wire"
    
    >
  <span class="radio-dot"></span>
  Transferencia
</label>
  <label class="radio">
  <input type="radio"
    name="pay"
    value="bizum"
    
    >
  <span class="radio-dot"></span>
  Bizum
</label>
</div>

{% from "radio.jinja" import radio %}
<div class="radio-group">
  {{ radio("Tarjeta de crédito", "pay", value="card", checked=True) }}
  {{ radio("Transferencia", "pay", value="wire") }}
  {{ radio("Bizum", "pay", value="bizum") }}
</div>

<div class="radio-group">
  <Radio label="Tarjeta de crédito" value="card" checked />
  <Radio label="Transferencia" value="wire" />
  <Radio label="Bizum" value="bizum" />
</div>

<div class="radio-group">
  <label class="radio">
  <input type="radio"
    name="s1"
    
    checked
    >
  <span class="radio-dot"></span>
  Activo
</label>
  <label class="radio">
  <input type="radio"
    name="s2"
    
    
    >
  <span class="radio-dot"></span>
  Sin marcar
</label>
  <label class="radio">
  <input type="radio"
    name="s3"
    
    
    disabled>
  <span class="radio-dot"></span>
  Deshabilitado
</label>
</div>

{% from "radio.jinja" import radio %}
<div class="radio-group">
  {{ radio("Activo", "s1", checked=True) }}
  {{ radio("Sin marcar", "s2") }}
  {{ radio("Deshabilitado", "s3", disabled=True) }}
</div>

<div class="radio-group">
  <Radio label="Activo" checked />
  <Radio label="Sin marcar" />
  <Radio label="Deshabilitado" disabled />
</div>

<div data-signals="{ plan: 'monthly' }">
  <div class="radio-group inline">
    <label class="radio">
  <input type="radio"
    name="plan"
    value="monthly"
    checked
     data-bind-plan="">
  <span class="radio-dot"></span>
  Mensual
</label>
    <label class="radio">
  <input type="radio"
    name="plan"
    value="annual"
    
     data-bind-plan="">
  <span class="radio-dot"></span>
  Anual
</label>
    <label class="radio">
  <input type="radio"
    name="plan"
    value="custom"
    
     data-bind-plan="">
  <span class="radio-dot"></span>
  Personalizado
</label>
  </div>
  <p style="margin-top:8px;">Plan elegido: <strong data-text="$plan"></strong></p>
</div>

{% from "radio.jinja" import radio %}
<div data-signals="{ plan: 'monthly' }">
  <div class="radio-group inline">
    {{ radio("Mensual", "plan", value="monthly", checked=True, attrs={"data-bind-plan": ""}) }}
    {{ radio("Anual", "plan", value="annual", attrs={"data-bind-plan": ""}) }}
    {{ radio("Personalizado", "plan", value="custom", attrs={"data-bind-plan": ""}) }}
  </div>
  <p style="margin-top:8px;">Plan elegido: <strong data-text="$plan"></strong></p>
</div>

<div data-signals="{ plan: 'monthly' }">
  <div class="radio-group inline">
    <Radio label="Mensual" value="monthly" checked data-bind-plan="" />
    <Radio label="Anual" value="annual" data-bind-plan="" />
    <Radio label="Personalizado" value="custom" data-bind-plan="" />
  </div>
  <p style="margin-top:8px;">Plan elegido: <strong data-text="$plan"></strong></p>
</div>