Control selection

Chirp UI covers common control jobs with native form controls first, then adds interactive components where the interaction is not a normal form submit.

Buttons and button groups

btn(...) is the primary action control. A button renders a <button>by default and switches to a boost-aware<a> when you pass href. The same button macro carriesvariant, appearance, and tone, so a submit button, a link button, and a destructive button stay visually consistent:

{% from "chirpui/button.html" import btn, button_group %}
{% from "chirpui/icon_btn.html" import icon_btn %}

{{ btn("Save changes", variant="primary", type="submit") }}
{{ btn("View docs", href="/docs/", variant="ghost") }}
{{ btn("Delete", variant="danger", hx={"delete": "/items/4", "target": "#row-4"}) }}

Reach for icon_btn(...)when the action is an icon alone (always pass an aria_label), and wrap several related buttons in button_group(...)to render one segmented action cluster:

{% call button_group() %}
  {{ btn("Cut", variant="ghost") }}
  {{ btn("Copy", variant="ghost") }}
  {{ icon_btn("more", aria_label="More actions") }}
{% end %}

Use a toggle_group(...)instead of a button group when the cluster is a single- or multi-choice selection rather than a row of discrete actions.

Native select or dropdown select

Useselect_field(...)when the value belongs to a form payload. Use dropdown_select(...)when selection is app state, a filter, or a command surface choice.dropdown_select(...)is the current combobox-like Chirp UI surface; it renders combobox/listbox anatomy and uses chirpuiDropdownSelect()for keyboard behavior.

Date picker boundary

Usedate_field(...)for stable date input. A popover calendar picker needs browser proof for keyboard navigation, focus movement, Escape/outside dismissal, and viewport containment before it should become a stable component.

Data table boundary

Compose dense record pages withdata_table(...):

{% from "chirpui/data_table.html" import data_table %}

{% call data_table(
  title="Records",
  headers=["Name", "Status"],
  rows=records,
  filter_action="/records",
  current=page,
  total=pages,
  url_pattern="/records?page={page}",
) %}
  ...
{% end %}

Supporting primitives

These primitives are intentionally small. They provide shared anatomy that docs, forms, menus, and marketing/product pages can reuse.

The full source guide is docs/components/control-selection.md.