Select

Select nativo con flecha custom. Las <option> van como slot.

Default

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Tamaños

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Estados

<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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Datastar — bind reactivo

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 "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

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>`.