Select
Select nativo con flecha custom. Las <option> van como slot.
<select id="country"
name="country"
class="select">
<option>España</option><option>Portugal</option><option>Francia</option><option>Italia</option>
</select>
{% from "select.jinja" import select %}
{% call select("country") %}
<option>España</option><option>Portugal</option><option>Francia</option><option>Italia</option>
{% endcall %}
<Select label="country">
<option>España</option><option>Portugal</option><option>Francia</option><option>Italia</option>
</Select>
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 style="display:grid;gap:8px;max-width:280px">
<select id="a"
name="a"
class="select sm"><option>Small (sm)</option></select>
<select id="b"
name="b"
class="select"><option>Default (md)</option></select>
<select id="c"
name="c"
class="select lg"><option>Large (lg)</option></select>
</div>
{% from "select.jinja" import select %}
<div style="display:grid;gap:8px;max-width:280px">
{% call select("a", size="sm") %}<option>Small (sm)</option>{% endcall %}
{% call select("b") %}<option>Default (md)</option>{% endcall %}
{% call select("c", size="lg") %}<option>Large (lg)</option>{% endcall %}
</div>
<div style="display:grid;gap:8px;max-width:280px">
<Select label="a" size="sm">
<option>Small (sm)</option>
</Select>
<Select label="b">
<option>Default (md)</option>
</Select>
<Select label="c" size="lg">
<option>Large (lg)</option>
</Select>
</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 style="display:grid;gap:8px;max-width:280px">
<select id="ok"
name="ok"
class="select"><option>Activo</option></select>
<select id="err"
name="err"
class="select invalid"><option>Inválido</option></select>
<select id="dis"
name="dis"
class="select" disabled><option>Deshabilitado</option></select>
</div>
{% from "select.jinja" import select %}
<div style="display:grid;gap:8px;max-width:280px">
{% call select("ok") %}<option>Activo</option>{% endcall %}
{% call select("err", invalid=True) %}<option>Inválido</option>{% endcall %}
{% call select("dis", disabled=True) %}<option>Deshabilitado</option>{% endcall %}
</div>
<div style="display:grid;gap:8px;max-width:280px">
<Select label="ok">
<option>Activo</option>
</Select>
<Select label="err" invalid>
<option>Inválido</option>
</Select>
<Select label="dis" disabled>
<option>Deshabilitado</option>
</Select>
</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 ... />
Seleccionada:
<div data-signals="{ currency: 'EUR' }">
<select id="currency"
name="currency"
class="select" data-bind-currency="">
<option value="EUR">EUR — Euro</option>
<option value="USD">USD — Dólar</option>
<option value="GBP">GBP — Libra</option>
</select>
<p style="margin-top:8px;">Seleccionada: <strong data-text="$currency"></strong></p>
</div>
{% from "select.jinja" import select %}
<div data-signals="{ currency: 'EUR' }">
{% call select("currency", attrs={"data-bind-currency": ""}) %}
<option value="EUR">EUR — Euro</option>
<option value="USD">USD — Dólar</option>
<option value="GBP">GBP — Libra</option>
{% endcall %}
<p style="margin-top:8px;">Seleccionada: <strong data-text="$currency"></strong></p>
</div>
<div data-signals="{ currency: 'EUR' }">
<Select label="currency" data-bind-currency="">
<option value="EUR">EUR — Euro</option>
<option value="USD">USD — Dólar</option>
<option value="GBP">GBP — Libra</option>
</Select>
<p style="margin-top:8px;">Seleccionada: <strong data-text="$currency"></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 |
name | str | — | Atributo name. |
size | "sm"|"md"|"lg" | "md" | Tamaño. |
invalid | bool | false | Estado de error. |
disabled | bool | false | Deshabilita el select. |
required | bool | false | Marca como requerido. |
attrs | dict | {} | Atributos extra. |
| (slot) | — | — | Las <option>. |