Segmented

Control de selección horizontal — iOS UISegmentedControl / Material BottomNavigation segmented. Touch-friendly por defecto (mín. 40 px alto). Útil en mobile, tablet y desktop como filtro inline o tabs compactas.

Básico — 4 opciones, una activa

<div class="segmented"
     role="tablist">
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Día">Día</button>
  <button type="button" class="segmented-option is-active"
          role="tab" aria-selected="true"
          data-value="Semana">Semana</button>
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Mes">Mes</button>
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Año">Año</button>
</div>

{% from "segmented.jinja" import segmented %}
{{ segmented(options=["Día", "Semana", "Mes", "Año"], active="Semana") }}

<Segmented options="['Día', 'Semana', 'Mes', 'Año']" active="Semana" />

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

Full width — estira al contenedor

<div class="segmented full"
     role="tablist">
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Pendientes">Pendientes</button>
  <button type="button" class="segmented-option is-active"
          role="tab" aria-selected="true"
          data-value="En curso">En curso</button>
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Cerrados">Cerrados</button>
</div>

{{ segmented(options=["Pendientes", "En curso", "Cerrados"], active="En curso", full=true) }}

{{ segmented(options=["Pendientes", "En curso", "Cerrados"], active="En curso", full=true) }}

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

Variante .sm — inline en toolbar

Periodo:

<div style="display:flex; align-items:center; gap:.75rem">
  <span style="color:var(--ink-3); font-size:var(--text-sm)">Periodo:</span>
  <div class="segmented sm"
     role="tablist">
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Mes">Mes</button>
  <button type="button" class="segmented-option is-active"
          role="tab" aria-selected="true"
          data-value="Trim.">Trim.</button>
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Año">Año</button>
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="Todo">Todo</button>
</div>
</div>

{{ segmented(options=["Mes", "Trim.", "Año", "Todo"], active="Trim.", size="sm") }}

{{ segmented(options=["Mes", "Trim.", "Año", "Todo"], active="Trim.", size="sm") }}

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

Reactivo con Datastar

Vista actual:

<div data-signals-view="grid">
  <div class="segmented"
     role="tablist" data-on:click="$view = evt.target.dataset.value">
  <button type="button" class="segmented-option is-active"
          role="tab" aria-selected="true"
          data-value="grid">Grid</button>
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="list">Lista</button>
  <button type="button" class="segmented-option"
          role="tab" aria-selected="false"
          data-value="table">Tabla</button>
</div>
  <p style="margin-top:.75rem">Vista actual: <strong data-text="$view"></strong></p>
</div>

<div data-signals-view="grid">
  {{ segmented(options=[
      {"value": "grid",  "label": "Grid"},
      {"value": "list",  "label": "Lista"},
      {"value": "table", "label": "Tabla"}], active="grid",
      attrs={"data-on:click": "$view = evt.target.dataset.value"}) }}
  <p>Vista actual: <strong data-text="$view"></strong></p>
</div>

<div data-signals-view="grid">
  {{ segmented(options=[
      {"value": "grid",  "label": "Grid"},
      {"value": "list",  "label": "Lista"},
      {"value": "table", "label": "Tabla"}], active="grid",
      attrs={"data-on:click": "$view = evt.target.dataset.value"}) }}
  <p>Vista actual: <strong data-text="$view"></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
`options`	list[str] \| list[dict]	`[]`	Strings o dicts `{"value": ..., "label": ...}`. Con strings, `value == label`.
`active`	str	`None`	Valor de la opción activa (comparado contra `value`).
`full`	bool	`false`	Estira a 100% del contenedor.
`size`	"md" \| "sm"	`"md"`	Tamaño. "sm" reduce padding y altura mín.
`aria_label`	str	`""`	Etiqueta accesible para el role="tablist".

Modificadores CSS

.segmented.full · estira al contenedor
.segmented.sm · variante compacta
.segmented-option.is-active · estado activo. También funciona con aria-selected="true" o data-active="true".