TuxSearch

default

Field

The tux-native bar. Leading glyph, 1px hairline border, clear (×) once there's a value. Sits beside other controls without overpowering them — this is what belongs in a table toolbar or a sidebar widget.

<TuxSearch
  v-model="q"
  placeholder="Search filename, path, owner…"
  @submit="onSearch"
/>

density

Slim field

size="slim" — 36px. For header chrome and constrained columns where even the 44px field is too tall.

editorial

Slab

The attached uppercase action button and a hard 2px rule — the institutional-print treatment. The corner radius follows Batch K.2 like every other control; the weight comes from the rule and the button, not from square corners. Use on hero strips and dedicated search pages where search is the page. The slab keeps the 60px / 51px editorial heights.

<TuxSearch
  v-model="q"
  variant="slab"
  placeholder="Search tti.tamu.edu"
  @submit="onSearch"
/>

labeled unit

Block

Heading + bar + optional lede, on the rhythm ramp (16px heading→bar, 12px bar→lede). Carries role="search". Use in footers, standalone search pages, and empty states where search is the primary next action. Pass block-bar="slab" when the block is the page's primary CTA.

<TuxSearch
  v-model="q"
  variant="block"
  heading="Search publications"
  lede="2,400+ reports, technical memoranda, and journal
        articles from 1950 to today."
/>

focus

Two-ring ring + corner-drop

Focus applies the two-ring token (2px sand inner halo + 2px maroon outer) at a constant border width — the old AggieUX 2px→3px thickening shifted the bar by 1px on every focus. On slab and block the corner-drop also lands: the brand slab drops in behind the bar, adapted from TuxCard minus the translate, so the caret never moves. Off by default on field; override with corner-drop.

typeahead

Suggestions panel

Fill the #suggestions slot and the bar opens an overlay panel on focus. The bar wires role="combobox", aria-expanded, aria-controls, Escape-to-close and focus-out; you own the listbox semantics inside. Type ru to see it.

<TuxSearch v-model="q" placeholder="Try &quot;ru&quot;">
  <template #suggestions="{ close }">
    <ul role="listbox">
      <li v-for="m in matches" :key="m" role="option">
        <button @click="q = m; close()">{{ m }}</button>
      </li>
    </ul>
  </template>
</TuxSearch>

states

Loading and disabled

loading swaps the leading glyph for a spinner and sets aria-busy. disabled dims the whole bar.

custom action

Override label + icon

Use action-label + action-icon on a slab when the input isn't a search per se — a filter input, a query builder. leading-icon retargets or removes the glyph.

props

Props, slots, events

• v-model — current input value.
• variant — "field" | "slab" | "block". Defaults to "field".
• blockBar — "field" | "slab", the bar anatomy inside a block. Defaults to "field".
• size — "regular" | "slim". Field 44/36px, slab 60/51px.
• placeholder — italic placeholder text.
• heading / lede — block chrome. Ignored on other variants.
• ariaLabel — accessible name. Falls back to heading, then placeholder.
• actionLabel — uppercase slab button label. Defaults to "Search".
• actionIcon — icon on the slab button. Off by default; the leading glyph carries the signal.
• leadingIcon — leading glyph. Defaults to "lucide:search"; pass false to drop it.
• clearable — show the × once there's a value. Defaults to true.
• loading — spinner glyph + aria-busy.
• disabled — disable input + controls.
• cornerDrop — force the focus corner-drop on or off. Defaults on for slab/block.
• forceFocus — render focused for docs/demos.
• #suggestions — scoped slot, receives { query, close }.
• Emits @submit (Enter or slab button) and @clear.
• Exposes focus() and clear() via template ref.