Components | Documentation

SolidJS Components

Show

Attribute Name	Type	Required/Optional	Default Value	Description
`when`	`condition (boolean)`	Required	-	Item display condition.
`fallback`	`JSX.Element \| string`	Optional	-	Renders its content if the condition in `when` is not met.

HTML

<Show
  when={context.count > 3}
  fallback={<div>I will be rendered if context.count is <= 3</div>}
>
  <div>I will be rendered if context.count is > 3</div>
</Show>

HTML

<Show
  when={context.count > 3}
  fallback={"string also valid"}
>
  <div>I will be rendered if context.count is > 3</div>
</Show>

For

Attribute Name	Type	Required/Optional	Default Value	Description
`each`	`array`	Required	-	The array you want to expand.
`fallback`	`JSX.Element \| string \| number`	Optional	-	Renders its content if the array is empty.

HTML

<ul>
  <For
    each={context.termList}
    fallback={<div class="term-list-placeholder">Loading</div>}
  >
    {(item, index) => (
        <li class="term-item" onClick={(e) => context.ding(item)}>
          {index() + ". " + JSON.stringify(item.name)}
        </li>
      )
    }
  </For>
</ul>

The function inside For has 2 arguments:

item - array item
index - getter for index, to get index call index()

Switch and Match

Switch:

Attribute Name	Type	Required/Optional	Default Value	Description
`fallback`	`JSX.Element \| string`	Optional	-	Renders its content if the condition in `when` is not met.

Match:

Attribute Name	Type	Required/Optional	Default Value	Description
`when`	`condition (boolean)`	Required	-	Item display condition.

XML

<Switch fallback={"Noname"}>
  <Match when={context.name === "John"}>
    John
  </Match>
  <Match when={context.name === "Alex"}>
    Alex
  </Match>
</Switch>

Piano Components

Piano provides a set of base components for Lightweight templates. You can use them as needed. These components will be expanded and improved in the future.

PianoPrimaryButton

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	Optional CSS class name for the button element.
`id`	`string`	Optional	-	Optional ID for the button element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes (e.g., `{ 'btn-active': true }`).
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.
`children`	`JSX.Element`	Required	-	The content to be rendered inside the button.
`onClick`	`(e: Event) => void \| Promise`	Required	-	Click event handler. Can be synchronous or asynchronous.
`name`	`string`	Optional	-	Optional name attribute for the button (useful for forms).
`disabled`	`boolean`	Optional	-	Whether the button is disabled.
`width`	`string`	Optional	-	Optional CSS width value (e.g., `'100px'`, `'50%'`).
`height`	`string`	Optional	-	Optional CSS height value.
`minHeight`	`string`	Optional	-	Optional CSS min-height value.
`minWidth`	`string`	Optional	-	Optional CSS min-width value.
`maxHeight`	`string`	Optional	-	Optional CSS max-height value.
`maxWidth`	`string`	Optional	-	Optional CSS max-width value.
`iconBefore`	`JSX.Element`	Optional	-	Optional icon element to display before the children.
`iconAfter`	`JSX.Element`	Optional	-	Optional icon element to display after the children.
`externalEventName`	`string`	Optional	-	Optional name for an external event (e.g., for analytics tracking).
`externalEventParams`	`Record`	Optional	-	Optional parameters to accompany the external event.
`ref`	`HTMLButtonElement`	Optional	-	Optional parameter provides button element.

XML

<PianoPrimaryButton
  width="200px"
  onClick={(e) => context.ding(item)}
  externalEventName="my-external-event-name"
  externalEventParams={{ param1: 'value', param2: 123 }}
>
  My button
</PianoPrimaryButton>

With dynamic externalEventName, externalEventParams:

XML

<PianoPrimaryButton
  width="200px"
  onClick={(e) => context.ding(item)}
  externalEventName={context.myExternalEventName}
  externalEventParams={context.myExternalEventParams}
>
  My button
</PianoPrimaryButton>

PianoSecondaryButton

Supports the same properties as the PianoPrimaryButton.

XML

<PianoSecondaryButton
  width="200px"
  onClick={(e) => context.ding(item)}
  externalEventName={context.myExternalEventName}
  externalEventParams={context.myExternalEventParams}
>
  My secondary button
</PianoSecondaryButton>

PianoGhostButton

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	Optional CSS class name for the button element.
`id`	`string`	Optional	-	Optional ID for the button element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes (e.g., `{ 'btn-active': true }`).
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.
`children`	`JSX.Element`	Required	-	The content to be rendered inside the button.
`onClick`	`(e: Event) => void \| Promise`	Required	-	Click event handler. Can be synchronous or asynchronous.
`name`	`string`	Optional	-	Optional name attribute for the button (useful for forms).
`disabled`	`boolean`	Optional	-	Whether the button is disabled.
`width`	`string`	Optional	-	Optional CSS width value (e.g., `'100px'`, `'50%'`).
`height`	`string`	Optional	-	Optional CSS height value.
`minHeight`	`string`	Optional	-	Optional CSS min-height value.
`minWidth`	`string`	Optional	-	Optional CSS min-width value.
`maxHeight`	`string`	Optional	-	Optional CSS max-height value.
`maxWidth`	`string`	Optional	-	Optional CSS max-width value.
`externalEventName`	`string`	Optional	-	Optional name for an external event (e.g., for analytics tracking).
`externalEventParams`	`Record`	Optional	-	Optional parameters to accompany the external event.
`ref`	`HTMLButtonElement`	Optional	-	Optional parameter provides button element.

XML

<PianoGhostButton
  width="200px"
  onClick={(e) => context.ding(item)}
  externalEventName="my-external-event-name"
  externalEventParams={{ param1: 'value', param2: 123 }}
>
  My ghost button
</PianoGhostButton>

PianoIconButton

Supports the same properties as the PianoGhostButton.

XML

<PianoIconButton onClick={(e) => handleClick(e)}>
   <svg>...</svg>
</PianoIconButton>

PianoCloseButton

Closes the widget on click and fires the onClose handler.

Supports the same properties as the PianoGhostButton.

XML

<PianoCloseButton name="my button" onClose={(e) => console.log("closed")} />

You can pass your icon to change the default close icon:

XML

<PianoCloseButton onClick={(e) => handleClick(e)}>
   <svg>...</svg>
</PianoCloseButton>

See this article for an explanation of how the "Allow user to close modal" checkbox works for Lightweight templates.

PianoStartCheckoutButton

A wrapper component that triggers the classic checkout flow when clicked. Renders one of the supported button components based on the as prop. Supports all props of the rendered button.

Attribute Name	Type	Required/Optional	Default Value	Description
`as`	`PianoPrimaryButton \| PianoSecondaryButton \| PianoGhostButton \| PianoIconButton`	Optional	`PianoPrimaryButton`	Button variant to render.
`term`	`term`	Required	-	Term for checkout.
`children`	`JSX.Element`	Required	-	The content to be rendered inside the button.
`onClick`	`(e: Event) => void \| Promise`	Optional	-	Optional callback fired after checkout is triggered.
`ref`	`HTMLButtonElement`	Optional	-	Optional parameter provides button element.
`class`	`string`	Optional	-	Optional CSS class name for the button element.
`id`	`string`	Optional	-	Optional ID for the button element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes (e.g., `{ 'btn-active': true }`).
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.
`name`	`string`	Optional	-	Optional name attribute for the button (useful for forms).
`disabled`	`boolean`	Optional	-	Whether the button is disabled.
`width`	`string`	Optional	-	Optional CSS width value (e.g., `'100px'`, `'50%'`).
`height`	`string`	Optional	-	Optional CSS height value.
`minHeight`	`string`	Optional	-	Optional CSS min-height value.
`minWidth`	`string`	Optional	-	Optional CSS min-width value.
`maxHeight`	`string`	Optional	-	Optional CSS max-height value.
`maxWidth`	`string`	Optional	-	Optional CSS max-width value.
`externalEventName`	`string`	Optional	-	Optional name for an external event (e.g., for analytics tracking).
`externalEventParams`	`Record`	Optional	`{}`	Optional parameters to accompany the external event.
`ariaLabel`	`string`	Optional	-	Accessible label for screen readers.

XML

<PianoStartCheckoutButton
  term={term}
  class="pn-offer__subscribe-button"
  externalEventName="offer-subscribe"
>
  <T>Subscribe</T>
</PianoStartCheckoutButton>

With a different button variant:

XML

<PianoStartCheckoutButton
  as="PianoSecondaryButton"
  term={item}
  externalEventName="offer-subscribe"
>
  <T>Subscribe</T>
</PianoStartCheckoutButton>

PianoBuyAsAGiftButton

A wrapper component that triggers the classic checkout flow as a gift when clicked. Renders one of the supported button components based on the as prop. Supports all props of the rendered button.

Attribute name	Type	Required/Optional	Default value	Description
`as`	`PianoPrimaryButton \| PianoSecondaryButton \| PianoGhostButton \| PianoIconButton`	optional	`PianoPrimaryButton`	Button variant to render.
`term`	`term`	required	—	Term for checkout.
`children`	`JSX.Element`	required	—	The content to be rendered inside the button.
`onClick`	`(e: Event) => void \| Promise`	optional	—	Optional callback fired after checkout is triggered.
`ref`	`HTMLButtonElement`	optional	—	Optional parameter provides button element.
`class`	`string`	optional	—	Optional CSS class name for the button element.
`id`	`string`	optional	—	Optional ID for the button element.
`classList`	`Record`	optional	—	Optional object for conditional CSS classes (e.g., `{ 'btn-active': true }`).
`style`	`Record`	optional	—	Optional inline styles as a key-value object.
`name`	`string`	optional	—	Optional name attribute for the button (useful for forms).
`disabled`	`boolean`	optional	—	Whether the button is disabled.
`width`	`string`	optional	—	Optional CSS width value (e.g., `'100px'`, `'50%'`).
`height`	`string`	optional	—	Optional CSS height value.
`minHeight`	`string`	optional	—	Optional CSS min-height value.
`minWidth`	`string`	optional	—	Optional CSS min-width value.
`maxHeight`	`string`	optional	—	Optional CSS max-height value.
`maxWidth`	`string`	optional	—	Optional CSS max-width value.
`externalEventName`	`string`	optional	—	Optional name for an external event (e.g., for analytics tracking).
`externalEventParams`	`Record`	optional	`{}`	Optional parameters to accompany the external event.
`ariaLabel`	`string`	optional	—	Accessible label for screen readers.

Example

XML

<PianoBuyAsAGiftButton
  term={term}
  externalEventName="offer-gift"
>
  <T>Buy as a gift</T>
</PianoBuyAsAGiftButton>

Forms

PianoInput

Default view:

Inline view:

Attribute Name	Type	Required/Optional	Default Value	Description
`name`	`string`	Required	—	The `name` attribute of the input.
`onChange`	`(event: InputEvent) => unknown`	Optional	`undefined`	Callback function triggered when the input value changes.
`type`	`string`	Optional	`undefined`	The type of the input (e.g., `'text'`, `'password'`, `'email'`).
`placeholder`	`string`	Optional	`undefined`	Placeholder text displayed when the input is empty.
`invalid`	`boolean`	Optional	`false`	Indicates whether the input is in an invalid state.
`required`	`boolean`	Optional	`false`	Marks the input as required for form validation.
`disabled`	`boolean`	Optional	`false`	Disables the input, making it non‑interactive.
`readonly`	`boolean`	Optional	`false`	Makes the input read‑only, preventing changes.
`value`	`string`	Optional	`undefined`	The current value of the input.
`autofocus`	`boolean`	Optional	`false`	Automatically focuses the input when the page loads.
`minLength`	`number`	Optional	`undefined`	Minimum number of characters allowed.
`maxLength`	`number`	Optional	`undefined`	Maximum number of characters allowed.
`max`	`number`	Optional	`undefined`	Maximum value (for number inputs).
`min`	`number`	Optional	`undefined`	Minimum value (for number inputs).
`autocomplete`	`string`	Optional	`undefined`	Autocomplete hint for the browser (e.g., `'on'`, `'off'`, `'name'`).
`height`	`string`	Optional	`undefined`	Custom CSS height value.
`textAlign`	`CSS.Property.TextAlign`	Optional	`undefined`	Text alignment inside the input (e.g., `'left'`, `'center'`, `'right'`).
`onEnter`	`(event: KeyboardEvent) => unknown`	Optional	`undefined`	Callback function triggered when the Enter key is pressed while the input is focused.
`ref`	`HTMLInputElement`	Optional	`undefined`	Reference to the underlying HTML input element.
`width`	`string`	Optional	`undefined`	Custom CSS width value.
`padding`	`string`	Optional	`undefined`	Custom CSS padding value.
`inputMode`	`"none" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal" \| "search"`	Optional	`undefined`	Hint to the browser about the type of virtual keyboard to display.
`pattern`	`string`	Optional	`undefined`	Regular expression pattern for input validation.
`class`	`string`	Optional	`undefined`	CSS class name(s) to apply to the input.
`classList`	`Record`	Optional	`undefined`	Object mapping class names to boolean flags for conditional styling.
`id`	`string`	Optional	`undefined`	The unique identifier for the input element.
`style`	`Record`	Optional	`undefined`	Inline styles as a key‑value object.
`label`	`string`	Optional	`undefined`	Text label associated with the input.
`iconLeft`	`JSX.Element`	Optional	`undefined`	Icon element displayed on the left side of the input.
`iconRight`	`JSX.Element`	Optional	`undefined`	Icon element displayed on the right side of the input.
`view`	`default \| inline`	Optional	`default`	View mode.
`error`	`string`	Optional	`undefined`	Error message to display when the input is invalid.

PianoCheckbox

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	`undefined`	CSS class name(s) to apply to the component.
`id`	`string`	Optional	`undefined`	Unique identifier for the element.
`classList`	`Record`	Optional	`undefined`	Object mapping class names to boolean flags for conditional styling.
`style`	`Record`	Optional	`undefined`	Inline styles as a key‑value object.
`name`	`string`	Required	—	The `name` attribute of the input.
`label`	`string`	Optional	`undefined`	Text label associated with the input.
`invalid`	`boolean`	Optional	`false`	Indicates whether the input is in an invalid state.
`required`	`boolean`	Optional	`false`	Marks the input as required for form validation.
`disabled`	`boolean`	Optional	`false`	Disables the input, making it non‑interactive.
`readonly`	`boolean`	Optional	`false`	Makes the input read‑only, preventing changes.
`checked`	`boolean`	Optional	`false`	Indicates whether a checkbox or radio input is checked.
`onChange`	`(event: Event) => unknown`	Optional	`undefined`	Callback function triggered when the input value changes.
`maxWidth`	`string`	Optional	`undefined`	Maximum width of the input (CSS `max-width` property).
`error`	`string`	Optional	`undefined`	Error message to display when the input is invalid.
`ariaLabel`	`string`	Optional	`undefined`	ARIA label for accessibility.

PianoTextarea

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	`undefined`	CSS class name(s) to apply to the textarea.
`id`	`string`	Optional	`undefined`	Unique identifier for the textarea element.
`classList`	`Record`	Optional	`undefined`	Object mapping class names to boolean flags for conditional styling.
`style`	`Record`	Optional	`undefined`	Inline styles as a key‑value object.
`label`	`string`	Optional	`undefined`	Text label associated with the textarea.
`error`	`string`	Optional	`undefined`	Error message to display when the textarea is invalid.
`name`	`string`	Required	—	The `name` attribute of the textarea.
`invalid`	`boolean`	Optional	`false`	Indicates whether the textarea is in an invalid state.
`required`	`boolean`	Optional	`false`	Marks the textarea as required for form validation.
`disabled`	`boolean`	Optional	`false`	Disables the textarea, making it non‑interactive.
`readonly`	`boolean`	Optional	`false`	Makes the textarea read‑only, preventing changes.
`value`	`string`	Optional	`undefined`	The current value of the textarea.
`onChange`	`(event: InputEvent) => unknown`	Optional	`undefined`	Callback function triggered when the textarea value changes.
`placeholder`	`string`	Required	—	Placeholder text displayed when the textarea is empty.
`autofocus`	`boolean`	Optional	`false`	Automatically focuses the textarea when the page loads.
`minLength`	`number`	Optional	`undefined`	Minimum number of characters allowed.
`maxLength`	`number`	Optional	`undefined`	Maximum number of characters allowed.
`rows`	`number`	Optional	`undefined`	Number of visible text lines (height in rows).
`cols`	`number`	Optional	`undefined`	Average character width (width in columns).
`maxWidth`	`string`	Optional	`undefined`	Maximum width of the textarea (CSS `max-width`).
`height`	`string`	Optional	`undefined`	Custom CSS height value.
`width`	`string`	Optional	`undefined`	Custom CSS width value.
`ref`	`HTMLTextAreaElement`	Optional	`undefined`	Reference to the underlying HTML textarea element.
`resize`	`Property.Resize`	Optional	`undefined`	CSS `resize` property controlling whether the textarea can be resized (e.g., `'none'`, `'both'`, `'horizontal'`, `'vertical'`).

PianoRadioButton

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	`undefined`	CSS class name(s) to apply to the component.
`id`	`string`	Optional	`undefined`	Unique identifier for the input element.
`classList`	`Record`	Optional	`undefined`	Object mapping class names to boolean flags for conditional styling.
`style`	`Record`	Optional	`undefined`	Inline styles as a key‑value object.
`name`	`string`	Required	—	The `name` attribute of the radio input (used to group radio buttons).
`value`	`string`	Required	—	The value associated with this radio option (submitted when the radio is selected).
`selected`	`string`	Optional	`undefined`	The currently selected value in the radio group. Used to determine if this radio is checked by comparing with `value`.
`label`	`string`	Optional	`undefined`	Text label displayed next to the radio button.
`invalid`	`boolean`	Optional	`false`	Indicates whether the radio is in an invalid state.
`required`	`boolean`	Optional	`false`	Marks the radio group as required (at least one option must be selected).
`disabled`	`boolean`	Optional	`false`	Disables the radio button, making it non‑interactive.
`readonly`	`boolean`	Optional	`false`	Makes the radio read‑only (selection cannot be changed).
`checked`	`boolean`	Optional	`false`	Explicitly sets the checked state of the radio button.
`onChange`	`(event: Event) => unknown`	Optional	`undefined`	Callback function triggered when the radio selection changes.

PianoSelect

Default view:

Inline view:

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	`undefined`	CSS class name(s) to apply to the select component.
`id`	`string`	Optional	`undefined`	Unique identifier for the select element.
`classList`	`Record`	Optional	`undefined`	Object mapping class names to boolean flags for conditional styling.
`style`	`Record`	Optional	`undefined`	Inline styles as a key‑value object.
`name`	`string`	Required	—	The `name` attribute of the select.
`label`	`string`	Optional	`undefined`	Text label associated with the select.
`invalid`	`boolean`	Optional	`false`	Indicates whether the select is in an invalid state.
`required`	`boolean`	Optional	`false`	Marks the select as required for form validation.
`disabled`	`boolean`	Optional	`false`	Disables the select, making it non‑interactive.
`readonly`	`boolean`	Optional	`false`	Makes the select read‑only (selection cannot be changed).
`onChange`	`(value: InputEvent) => unknown`	Optional	`undefined`	Callback function triggered when the select value changes.
`options`	`ISelectOption[]`	Required	—	Array of options to display in the dropdown. Each option has `id` and `text`.
`selected`	`string`	Optional	`undefined`	The `id` of the currently selected option.
`maxVisibleRows`	`number`	Optional	`undefined`	Maximum number of visible rows in the dropdown before scrolling.
`placeholder`	`string`	Required	—	Placeholder text displayed when no option is selected.
`maxWidth`	`string`	Optional	`undefined`	Maximum width of the select component (CSS `max-width`).
`view`	`default \| inline`	Optional	`undefined`	Visual variant of the select.
`iconLeft`	`JSX.Element`	Optional	`undefined`	Icon element displayed on the left side of the select.
`error`	`string`	Optional	`undefined`	Error message to display when the select is invalid.

Typography

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	Optional CSS class name for the element.
`id`	`string`	Optional	-	Optional ID for the element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes.
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.
`children`	`JSX.Element \| string`	Required	-	The content to be rendered inside the typography component.

PianoHeadline

XML

<PianoHeadline>Lorem ipsum dolor sit amet</PianoHeadline>

PianoSubHeadline

XML

<PianoSubHeadline>Lorem ipsum dolor sit amet</PianoSubHeadline>

PianoText

XML

<PianoText>Lorem ipsum dolor sit amet</PianoText>

PianoAccentedText

XML

<PianoAccentedText>Lorem ipsum dolor sit amet</PianoAccentedText>

Complex

PianoHeader

Attribute Name	Type	Required/Optional	Default Value	Description
`pianoIsUserControlHidden`	`boolean`	Optional	`false`	Hide user control.
`pianoIsLocaleSelectorHidden`	`boolean`	Optional	`false`	Hide locale selector.
`pianoIsCloseButtonHidden`	`boolean`	Optional	`false`	Hide close button.

XML

<PianoHeader pianoIsCloseButtonHidden={true}></PianoHeader>

Fires an external event closeWidget on close button click.

Utility

PianoImg

Renders an image and displays a placeholder during loading.

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	Optional CSS class name for the element.
`id`	`string`	Optional	-	Optional ID for the element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes.
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.
`src`	`string`	Optional	-	Source URL of the image.
`width`	`string \| number`	Optional	`64px`	Width of the image (can be a string with units or a number).
`height`	`string \| number`	Optional	`64px`	Height of the image (can be a string with units or a number).
`alt`	`string`	Optional	-	Alternative text for the image (accessibility).

XML

<PianoImg src="image-src" width="64" height="64" alt="alt-text"></PianoImg>

PianoUserName

Renders Piano user name, full name or email.

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	Optional CSS class name for the element.
`id`	`string`	Optional	-	Optional ID for the element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes.
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.
`children`	`JSX.Element \| string`	Optional	-	Optional content to be rendered inside the component.
`display`	`"name" \| "fullName" \| "email"`	Required	-	How the username will be presented.
`fallback`	`string`	Optional	-	Rendered if the user does not exist.

XML

<PianoUserName
  display="name | fullName | email"
  fallback="Lorem ipsum"
  class="username"
>
  My external name(optional)
</PianoUserName>

PianoExternalEvent

Fire external event and sends auto micro conversion on click / submit.

Attribute Name	Type	Required/Optional	Default Value	Description
`name`	`string`	Required	-	External event name.
`params`	`object`	Optional	`{}`	External event options.

HTML

<PianoExternalEvent name="some-event" params={{ myParam:'my-param-value' }}>
  <button>Test event</button>
</PianoExternalEvent>

To know more how to set up click tracking and reporting of multiple clickable elements e.g. buttons follow this FAQ.

A

Adds _ptid to the href and sends an auto micro conversion when the link is clicked.

Important: Do not change to . Our conversion-tracking implementation relies on the uppercase tag and will not track conversions otherwise.
Lowercase a is the standard HTML element without tracking, while uppercase A is our component with tracking.

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	CSS class name for the element.
`id`	`string`	Optional	-	Unique identifier for the element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes.
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.
`children`	`JSX.Element`	Required	-	Child elements to render inside the component.
`noptid`	`boolean`	Optional	-	If true, prevents link tracking.
`href`	`string`	Optional	-	The URL to navigate to when the link is clicked.
`target`	`string`	Optional	-	Specifies where to open the linked document (e.g., `"_blank"`, `"_self"`).
Other tag attributes	-	Optional	-	Standard HTML anchor attributes: `hreflang`, `media`, `ping`, `referrerpolicy`, `rel`, `type`.

HTML

<A href="my-external-link">
  link text
</A>

PianoLocaleSelector

Renders the locale selector.

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	CSS class name for the element.
`id`	`string`	Optional	-	Unique identifier for the element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes.
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.

XML

<PianoLocaleSelector></PianoLocaleSelector>

PianoUserControl

Renders a user control menu.

Attribute Name	Type	Required/Optional	Default Value	Description
`class`	`string`	Optional	-	CSS class name for the element.
`id`	`string`	Optional	-	Unique identifier for the element.
`classList`	`Record`	Optional	-	Optional object for conditional CSS classes.
`style`	`Record`	Optional	-	Optional inline styles as a key-value object.

XML

<PianoUserControl></PianoUserControl>

T (Translate)

Translates the passed string. See the Localization section for more details.

Attribute Name	Type	Required/Optional	Default Value	Description
`context`	`string`	Optional	-	The context from which translations will be taken.
`template`	`Record`	Optional	-	Inserts variables into the translated string.

XML

<T>string to translate</T>
<T context="offer.component">string to translate</T>
<T
  template={{ templateVariable: item, otherTemplateVariable: userName }}
>
  string to translate [[templateVariable]] with template [[otherTemplateVariable]]
</T>

Last updated: July 07, 2026