component

TuxSearch

Branded inline search bar — bordered input + attached uppercase action button. Two sizes (regular 60px / slim 51px). Focus border pulls to maroon (gold on dark), 3px wide. Submit fires on Enter or button click.

canonical

Regular · 60px

<TuxSearch
  v-model="q"
  placeholder="Search the corpus"
  @submit="onSearch"
/>

slim

Header / sidebar size

Pass size="slim" for header chrome and sidebar widgets. 51px tall, 123px button width.

focus state

Forced focus border

Pass force-focus for screenshots / docs / demos. In normal use, the focus border applies on input focus automatically.

custom action

Override label + icon

Use action-label + action-icon when the input isn't a search per se — a filter input, a query builder, etc.

composed block

Heading + bar + lede

Trivial composition — heading, search, optional helper text. No dedicated component for this; just stack them.

Find a research project

Searches across all 650+ active projects. Use quotes for exact match.

props

Props + events

  • v-model — current input value.
  • size — "regular" | "slim". Defaults to "regular".
  • placeholder — italic placeholder text.
  • actionLabel — uppercase button label. Defaults to "Search".
  • actionIcon — Lucide icon name. Defaults to "lucide:search".
  • disabled — disable input + action.
  • forceFocus — render with focus border for docs/demos.
  • Emits @submit with the current value on Enter or button click.