Radio
Botón de opción único por grupo (mismo name). Combina con .ok-radio-group o .ok-radio-card.
<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>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<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>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<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>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<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>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
label | str | — | Texto inline. |
name | str | — | Grupo (todas las opciones del mismo grupo comparten name). |
value | str | "" | Valor enviado al hacer submit. |
checked | bool | false | Estado inicial. |
disabled | bool | false | Deshabilita el radio. |
attrs | dict | {} | Atributos extra. |