Input
Input de texto base — admite cualquier type HTML, 3 tamaños y estado de error.
<input id="name"
type="text"
name="name"
class="input" placeholder="Cafetería La Plaza">
{% from "input.jinja" import input %}
{{ input("name", placeholder="Cafetería La Plaza") }}
<Input label="name" placeholder="Cafetería La Plaza" />
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:360px">
<input id="a"
type="text"
name="a"
class="input sm" placeholder="Compact (sm) — 30px">
<input id="b"
type="text"
name="b"
class="input" placeholder="Default (md) — 36px">
<input id="c"
type="text"
name="c"
class="input lg" placeholder="Large (lg) — 44px">
</div>
{% from "input.jinja" import input %}
<div style="display:grid;gap:8px;max-width:360px">
{{ input("a", size="sm", placeholder="Compact (sm) — 30px") }}
{{ input("b", placeholder="Default (md) — 36px") }}
{{ input("c", size="lg", placeholder="Large (lg) — 44px") }}
</div>
<div style="display:grid;gap:8px;max-width:360px">
<Input label="a" size="sm" placeholder="Compact (sm) — 30px" />
<Input label="b" placeholder="Default (md) — 36px" />
<Input label="c" size="lg" placeholder="Large (lg) — 44px" />
</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:360px">
<input id="ok"
type="email"
name="ok"
class="input" value="contacto@laplaza.es">
<input id="err"
type="text"
name="err"
class="input invalid" value="X-1234">
<input id="dis"
type="text"
name="dis"
class="input" value="No editable" disabled>
</div>
{% from "input.jinja" import input %}
<div style="display:grid;gap:8px;max-width:360px">
{{ input("ok", value="contacto@laplaza.es", type="email") }}
{{ input("err", value="X-1234", invalid=True) }}
{{ input("dis", value="No editable", disabled=True) }}
</div>
<div style="display:grid;gap:8px;max-width:360px">
<Input label="ok" value="contacto@laplaza.es" type="email" />
<Input label="err" value="X-1234" invalid />
<Input label="dis" value="No editable" 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="{ q: '' }">
<input id="q"
type="text"
name="q"
class="input" placeholder="Escribe algo…" data-bind-q="">
<p style="margin-top:8px;">Tu input: <strong data-text="$q"></strong></p>
</div>
{% from "input.jinja" import input %}
<div data-signals="{ q: '' }">
{{ input("q", placeholder="Escribe algo…", attrs={"data-bind-q": ""}) }}
<p style="margin-top:8px;">Tu input: <strong data-text="$q"></strong></p>
</div>
<div data-signals="{ q: '' }">
<Input label="q" placeholder="Escribe algo…" data-bind-q="" />
<p style="margin-top:8px;">Tu input: <strong data-text="$q"></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. |
type | str | "text" | Tipo HTML (text, email, password, number, tel, url…). |
value | str | "" | Valor inicial. |
placeholder | str | "" | Texto guía. |
size | "sm"|"md"|"lg" | "md" | Tamaño. |
invalid | bool | false | Estado de error. |
disabled | bool | false | Deshabilita el input. |
required | bool | false | Marca como requerido. |
attrs | dict | {} | Atributos extra (data-bind-*, etc). |