<sb-trade-selector>

<sb-trade-selector> is a web component for the trade question: search, results with definitions, and a selected view with Edit. It’s form-associated, so the chosen trade’s value is submitted under name like a native control.

<sb-trade-selector name="Primary trade" required></sb-trade-selector>

Reference

Install

<!-- Drop-in: registers the element -->
<script src="sb-trade-selector.js"></script>

// Bundler
import '@partner-sdk/elements/define';

Attributes

Attribute
name	Form field name (the question’s field)
search	The trade question’s search template, as HTML-escaped JSON. Or set the search property
label, placeholder, button-label	Text
required	Invalid until a trade is selected
value	A pre-selected trade value
nonce	CSP nonce for the component’s <style>

Properties

Property
client	Required to search. Your client from createClient, so searches share its origin, auth and hooks
search	The search template, as an object
value	The selected trade value; "" when none
trade	The selected TradeResult, or null

Events

Event
input, then change	On select and on Edit. change has detail: { trade, searchId }; trade is null after Edit

Styling

CSS custom properties: --sb-color-primary, --sb-color-primary-light, --sb-color-text, --sb-color-text-medium, --sb-color-background-highlight, --sb-color-error, --sb-color-focus, --sb-radius.

Parts: label, input, button, results, result, selected, edit.

Usage

With a session

The element never writes to the questionnaire. Save the answer yourself:

const el = document.createElement('sb-trade-selector');
el.name = field.name;
el.search = field.search;
el.client = client;
el.addEventListener('change', () => {
  session.edit(field.name, el.value);
  session.flush();
});

Theme it

sb-trade-selector {
  --sb-color-primary: #0b5fff;
  --sb-radius: 8px;
}
sb-trade-selector::part(result) {
  padding: 12px;
}

Troubleshooting

The search attribute doesn’t parse

The template’s title contains an apostrophe. HTML-escape the JSON, or set the search property instead.