Betashares ETF Search Component

A self-contained web component for searching and filtering Betashares ETFs.

Variant 1 - Search Trigger

Input-style trigger that opens a dialog. Press Ctrl+K from anywhere or click to activate. Features URL state management for shareability.

<betashares-etf-search
  api-url="https://betashares-search-proxy.betashares.workers.dev"
></betashares-etf-search>

Variant 2 - Button Trigger

Button trigger that can prefill filters, categories or search terms.

<betashares-etf-search
  variant="button"
  button-text="Search ETFs"
  api-url="https://betashares-search-proxy.betashares.workers.dev"
></betashares-etf-search>

<betashares-etf-search
  variant="button"
  button-text="Browse Australian Equities"
  initial-categories="Australian Equities"
  api-url="https://betashares-search-proxy.betashares.workers.dev"
></betashares-etf-search>

Variant 3 - Inline Panel

Renders the search panel directly in the page flow. No trigger, no overlay - ideal for dedicated search pages.

<betashares-etf-search
  variant="inline"
  height="550px"
  api-url="https://betashares-search-proxy.betashares.workers.dev"
></betashares-etf-search>

Configuration

All attributes are optional. The component works with zero configuration using sensible defaults.

Attribute	Type	Default	Description
`variant`	`"search" \| "button" \| "inline"`	`"search"`	Controls which surface is rendered.
`api-url`	`string`	Betashares API	Override the search endpoint. Required when embedding on external domains - the Betashares search API does not include CORS headers, so a proxy is needed. The included Cloudflare Worker (`proxy/worker.js`) forwards requests unchanged and adds the required `Access-Control-Allow-Origin` header.
`initial-query`	`string`	-	Pre-fills the search input when the dialog opens.
`initial-categories`	`string`	-	Comma-separated list of asset categories to pre-activate. E.g. `"Australian Equities,Cash"`.
`initial-approach`	`string`	-	Comma-separated management approaches to pre-activate. E.g. `"Active"`.
`initial-order-by`	`string`	-	Pre-selected sort in dot notation. E.g. `one_year_return.desc`, `management_fee.asc`, `display_name.asc`.
`auto-focus`	`boolean`	`true`	Whether to focus the search input when the dialog opens. Set to `false` when pre-applying filters so results are immediately scrollable.
`placeholder`	`string`	"Search by ASX code, fund name or phrase"	Custom placeholder text for the search input.
`max-width`	`string`	-	Max width of the search trigger. Any valid CSS value. Only applies when `variant="search"`.
`button-text`	`string`	"Search ETFs"	Label for the trigger button. Only applies when `variant="button"`.
`height`	`string`	"550px"	Height of the inline panel. Any valid CSS value. Only applies when `variant="inline"`.