# Control selection

URL: https://lbliii.github.io/chirp-ui/docs/components/controls/
Section: components
Tags: components, forms

--------------------------------------------------------------------------------

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. Need Use Trigger an action or submit a form btn(...) Icon-only action icon_btn(...) Cluster of related actions button_group(...) Normal form option list select_field(...) App-state or filter selection menu dropdown_select(...) Small visible single-choice group toggle_group(type="single", ...) Small visible multi-choice group toggle_group(type="multiple", ...) Native date input date_field(...) Standalone range control slider(...) Form range control with hint/error handling range_field(...) Bounded overflow region scroll_area(...) Reusable list/menu/result row item(...) Record table with filters and pagination data_table(...) 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 carries variant, 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 Use select_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. Component specimen Toggle group Use visible grouped options for compact single or multiple choice. Preview Code Docs Date picker boundary Use date_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. Component specimen Slider Use the standalone range primitive outside full form-field chrome. Volume 68 Data table boundary Compose dense record pages with data_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 %} Component specimen Data table A parent wrapper for filters, table rows, empty state, and pagination. Deployments Recent environment activity Name Status web Ready worker Queued Supporting primitives These primitives are intentionally small. They provide shared anatomy that docs, forms, menus, and marketing/product pages can reuse. Component specimen Item Reusable row anatomy for result lists, menu rows, and command surfaces. Workspace settings Team, billing, and access controls Updated Component specimen Scroll area A bounded overflow region with optional edge affordance. Release notes Latest package changes 3 Component docs Stable macro guidance API reference Generated module docs Patterns Composable page recipes Component specimen Keyboard key Inline key and chord rendering. Ctrl K Component specimen Separator Semantic or decorative separation with optional label. or Component specimen Aspect ratio Stable media and preview framing. 16:9 Component specimen Label Standalone form-label anatomy for custom controls. Email * Work address The full source guide is docs/components/control-selection.md.

--------------------------------------------------------------------------------

Metadata:
- Word Count: 544
- Reading Time: 3 minutes