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.

PianoToggle

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name; used as input id and label target.
`leftLabel`	`JSX.Element`	Optional	-	Label rendered before (left of) the toggle.
`rightLabel`	`JSX.Element`	Optional	-	Label rendered after (right of) the toggle.
`checked`	`boolean`	Optional	`false`	Initial checked state.
`disabled`	`boolean`	Optional	`false`	Disables interaction and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the field required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) outline.
`error`	`JSX.Element`	Optional	-	Error message rendered below the toggle.
`ariaLabel`	`string`	Optional	-	ARIA label for screen readers when no visible label is set.
`onChange`	`(event: Event) => unknown`	Optional	-	Called when the toggle state changes.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<PianoToggle
  name="darkMode"
  leftLabel="Off"
  rightLabel="On"
  checked={true}
  onChange={(e) => console.log(e)}
/>

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.

PianoRadioGroup

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name; shared by every radio input in the group.
`options`	`{ value: string; label: string; disabled?: boolean }[]`	Required	-	The selectable options (`{ value, label, disabled? }`).
`selected`	`string`	Optional	-	Value of the currently selected option.
`label`	`string`	Optional	-	Group label rendered above the options.
`error`	`string`	Optional	-	Error message rendered below the options.
`disabled`	`boolean`	Optional	`false`	Disables every option and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the group required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) styling and `aria-invalid`.
`onChange`	`(event: InputEvent \| Event) => unknown`	Optional	-	Called when a different option is selected.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<PianoRadioButtonGroup
  name="plan"
  label="Choose a plan"
  selected="monthly"
  options={[
    { value: "monthly", label: "Monthly" },
    { value: "yearly", label: "Yearly" },
  ]}
  error="Please choose a plan"
  onChange={(e) => console.log(e.target)}
/>

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	description
`isUserControlHidden`	boolean	optional	false	hide user control
`isLocaleSelectorHidden`	boolean	optional	false	hide locale selector
`isCloseButtonHidden`	boolean	optional	false	hide close button
`isUserLogoutHidden`	boolean	optional	false	hide logout button
`onClose`	`(e: Event) => void`	optional	undefined	close handler forwarded to PianoCloseButton

PianoTabs

Attribute name	Type	Required/Optional	Default value	Description
`value`	`string`	Optional	-	Controlled active tab value. When provided, the component is controlled.
`defaultValue`	`string`	Optional	-	Initial active tab value in uncontrolled mode.
`onChange`	`(value: string) => void`	Optional	-	Called when the active tab changes via user interaction.
`children`	`JSX.Element`	Required	-	`PianoTab` elements.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

PianoTab

Attribute name	Type	Required/Optional	Default value	Description
`value`	`string`	Required	-	Identifier shared by the trigger and its panel.
`label`	`JSX.Element`	Required	-	Label rendered inside the tab trigger.
`disabled`	`boolean`	Optional	`false`	When true the tab cannot be activated.
`children`	`JSX.Element`	Required	-	Panel content (lazy: created only when the tab is active).

<PianoTabs defaultValue="account" onChange={(value) => console.log(value)}>
  <PianoTab value="account" label="Account">Account panel</PianoTab>
  <PianoTab value="password" label="Password">Password panel</PianoTab>
</PianoTabs>

PianoCountdown

Attribute name	Type	Required/Optional	Default value	Description
`endDate`	`Date`	Required	-	Target date the countdown ticks toward.
`format`	`string`	Required	-	Colon-separated units to display, e.g. `"dd:hh:mm:ss"`.
`onComplete`	`() => void`	Optional	-	Called once when the countdown reaches zero.
`children`	`JSX.Element`	Optional	-	Pre-translated title rendered above the timer.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<PianoCountdown
  endDate={new Date("12.31.2026")}
  format="dd:hh:mm:ss"
  onComplete={() => console.log("done")}
>
  Limited offer ends in
</PianoCountdown>

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>

MediaQuery

Conditionally renders its children based on the viewport or widget container width.

Attribute name	Type	Required/Optional	Default value	Description
class	`string`	optional		CSS class name for the root element.
id	`string`	optional		ID for the root element.
classList	`Record<string, boolean>`	optional		Object for conditional CSS classes.
style	`Record<string, string \| undefined>`	optional		Inline styles as a key-value object.
layout	`"viewport" \| "widget"`	optional	`"viewport"`	Source of the measured width: `viewport` compares against `window.innerWidth`, `widget` against the `#root` container width.
bound	`"min" \| "max"`	required		Comparison direction: `min` keeps children visible while width >= `width`; `max` while width <= `width`.
width	`number`	required		Width threshold in pixels.
children	`JSX.Element`	required		Content gated by the width condition.

<MediaQuery layout="viewport" bound="min" width={800}>
  Visible when viewport is at least 800px wide
</MediaQuery>

Primitives

The header bar (root). A flex row that lays out its groups with space-between, so the first group sits at the start and the last at the end. It is purely structural - it holds no state; the visible parts are composed from Header.Group with controls placed directly inside.

A Header.Group is reused for either side - its position (start / end) is determined by the order it appears in the header and the root's space-between layout, not by the group itself.

Primitive	Description
`Header`	Root flex row that lays out its groups with `space-between`.
`Header.Group`	A flex group of controls inside `Header`. The same group is reused for either side.

Header primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	`Header.Group` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	The controls to render (buttons, selectors, etc.).
`class`	`string`	Optional	-	CSS class name for the group element.
`id`	`string`	Optional	-	ID for the group element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Header>
  <Header.Group>
    <PianoLocaleSelector />
  </Header.Group>
  <Header.Group>
    <PianoUserControl />
    <PianoCloseButton />
  </Header.Group>
</Header>

CloseButton

Compound close button. On click, it first calls the optional onClose , then dispatches the global closeButtonClicked signal. The icon (CloseButton.Icon, the default close icon, overridable via children) is composed as a child.

Primitive	Description
`CloseButton`	Root interactive button. Dispatches the global close signal and calls `onClose`.
`CloseButton.Icon`	The decorative icon (`aria-hidden`). Renders the built-in close icon by default.

CloseButton primitive

Attribute name	Type	Required/Optional	Default value	Description
`onClose`	`(e: Event) => void`	Optional	-	Called after the close signal is dispatched.
`type`	`"rounded" \| "square"`	Optional	`"square"`	Visual shape: `"square"` (63px) or `"rounded"` (circular, 24px default size).
`ariaLabel`	`string`	Optional	`"Close modal"`	Explicit accessible label.
`name`	`string`	Optional	-	Name attribute for the button.
`disabled`	`boolean`	Optional	`false`	Whether the button is disabled.
`width`	`string`	Optional	-	CSS width value.
`height`	`string`	Optional	-	CSS height value.
`minWidth`	`string`	Optional	-	CSS min-width value.
`minHeight`	`string`	Optional	-	CSS min-height value.
`maxWidth`	`string`	Optional	-	CSS max-width value.
`maxHeight`	`string`	Optional	-	CSS max-height value.
`opacity`	`string`	Optional	-	CSS opacity value.
`externalEventName`	`string`	Optional	-	External event name (analytics).
`externalEventParams`	`Record<string, unknown>`	Optional	-	External event params (analytics).
`ref`	`HTMLButtonElement`	Optional	-	Ref to the button element.
`children`	`JSX.Element`	Required	-	`CloseButton.Icon`.
`class`	`string`	Optional	-	CSS class name for the button element.
`id`	`string`	Optional	-	ID for the button element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

CloseButton.Icon primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Optional	Built-in close icon	Optional custom icon.
`class`	`string`	Optional	-	CSS class name for the icon wrapper.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<CloseButton onClose={(e) => handleClose(e)}>
  <CloseButton.Icon />
</CloseButton>

<CloseButton onClose={(e) => handleClose(e)}>
  <CloseButton.Icon>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </CloseButton.Icon>
</CloseButton>

Countdown

Counts down toward endDate. The visible parts (title, timer, units, separators) are composed as children; each Countdown.Unit reads its value from context. When the countdown reaches zero, onComplete is fired once and the whole component unmounts itself.

The remaining time is recomputed from Date.now() on every tick, so it stays accurate even if the tab was throttled in the background. Pass a stable endDate reference.

Primitive	Description
`Countdown`	Root. Ticks toward `endDate` and exposes the remaining time via context.
`Countdown.Title`	The heading rendered above the timer.
`Countdown.Timer`	Row wrapper laying out `Countdown.Unit` and `Countdown.Separator` parts.
`Countdown.Unit`	A single time unit: the two-digit value above its label.
`Countdown.Separator`	The decorative divider placed between units (`aria-hidden`). Renders `":"` by default.

Countdown primitive

Attribute name	Type	Required/Optional	Default value	Description
`endDate`	`Date`	Required	-	Target date the countdown ticks toward.
`onComplete`	`() => void`	Optional	-	Called once when the countdown reaches zero.
`children`	`JSX.Element`	Required	-	`Countdown.Title` / `Countdown.Timer` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Countdown.Title primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Title content.
`class`	`string`	Optional	-	CSS class name for the title element.
`id`	`string`	Optional	-	ID for the title element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Countdown.Timer primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	`Countdown.Unit` and `Countdown.Separator` parts.
`class`	`string`	Optional	-	CSS class name for the timer element.
`id`	`string`	Optional	-	ID for the timer element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Countdown.Unit primitive

Attribute name	Type	Required/Optional	Default value	Description
`unit`	`"dd" \| "hh" \| "mm" \| "ss"`	Required	-	Which time unit to display.
`children`	`JSX.Element`	Optional	Translated unit name	Optional label override.
`class`	`string`	Optional	-	CSS class name for the unit element.
`id`	`string`	Optional	-	ID for the unit element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Countdown.Separator primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Optional	`":"`	Optional separator content.
`class`	`string`	Optional	-	CSS class name for the separator element.
`id`	`string`	Optional	-	ID for the separator element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Countdown endDate={new Date("12.12.2027")}>
  <Countdown.Title>Extended sale # days only</Countdown.Title>
  <Countdown.Timer>
    <Countdown.Unit unit="dd" />
    <Countdown.Separator />
    <Countdown.Unit unit="hh" />
    <Countdown.Separator />
    <Countdown.Unit unit="mm" />
  </Countdown.Timer>
</Countdown>

Tabs

A set of layered sections of content - known as tab panels - displayed one at a time. The component is composed from Tabs.List / Tabs.Trigger / Tabs.Content, matched to each other by their value. Inactive panels are not mounted (lazy rendering).When no tab is active on mount, the first enabled trigger is auto-selected.

Primitive	Description
`Tabs`	Root. Holds the active-tab state and wires the primitives together by `value`.
`Tabs.List`	Container with `role="tablist"` wrapping the triggers; owns keyboard navigation.
`Tabs.Trigger`	A tab button (`role="tab"`) tied to a `value`; activates its matching `Tabs.Content`.
`Tabs.Content`	A tab panel (`role="tabpanel"`) tied to a `value`; rendered only while active.

Tabs primitive

Attribute name	Type	Required/Optional	Default value	Description
`value`	`string`	Optional	-	Controlled active tab value. When provided, the component is controlled.
`defaultValue`	`string`	Optional	-	Initial active tab value in uncontrolled mode.
`onChange`	`(value: string) => void`	Optional	-	Called when the active tab changes via user interaction.
`children`	`JSX.Element`	Required	-	`Tabs.List` and `Tabs.Content` elements.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Tabs.List primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	`Tabs.Trigger` elements.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Tabs.Trigger primitive

Attribute name	Type	Required/Optional	Default value	Description
`value`	`string`	Required	-	Identifier matching a `Tabs.Content` value.
`disabled`	`boolean`	Optional	`false`	When true the trigger cannot be activated.
`children`	`JSX.Element`	Required	-	Label rendered inside the button.
`class`	`string`	Optional	-	CSS class name for the button element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Tabs.Content primitive

Attribute name	Type	Required/Optional	Default value	Description
`value`	`string`	Required	-	Identifier matching a `Tabs.Trigger` value.
`children`	`JSX.Element`	Required	-	Panel content.
`class`	`string`	Optional	-	CSS class name for the panel element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Tabs defaultValue="account" onChange={(value) => console.log(value)}>
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="password">Password</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">Account panel</Tabs.Content>
  <Tabs.Content value="password">Password panel</Tabs.Content>
</Tabs>

Toggle

A compound on/off switch. The root holds the form-field state (name, checked, validation flags) and shares it via context; the visible parts - the switch control, label(s), and error message - are composed as children. Two labels can be placed around the control (e.g. "Off" / "On"). Validation styling (invalid) is applied to the control, and an ariaLabel provides an accessible name when no visible label is composed.

Primitive	Description
`Toggle`	Root. Owns the toggle state (name, checked, disabled/readonly/required/invalid) and change handler.
`Toggle.Control`	The visual switch track with a sliding thumb.
`Toggle.Label`	Label for the toggle (can appear on either side of the control).
`Toggle.Error`	Error message for the toggle.

Toggle primitive

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name; used as input id and label target.
`checked`	`boolean`	Optional	`false`	Initial checked state.
`disabled`	`boolean`	Optional	`false`	Disables interaction and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the field required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) outline.
`ariaLabel`	`string`	Optional	-	ARIA label for screen readers when no visible label is composed.
`onChange`	`(event: Event) => unknown`	Optional	-	Called when the toggle state changes.
`children`	`JSX.Element`	Required	-	`Toggle.Control`, `Toggle.Label` and `Toggle.Error` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Toggle.Control primitive

Toggle.Control takes no props - it renders the switch track and thumb and reads the toggle state from context.

Toggle.Label primitive

Attribute name	Type	Required/Optional	Default value	Description
`ariaLabel`	`string`	Optional	-	ARIA label override.
`children`	`JSX.Element`	Required	-	Label content.
`class`	`string`	Optional	-	CSS class name for the label element.
`id`	`string`	Optional	-	ID for the label element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Toggle.Error primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Error message content.
`class`	`string`	Optional	-	CSS class name for the error element.
`id`	`string`	Optional	Control's aria error id	ID for the error element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Toggle name="darkMode" checked onChange={(e) => console.log(e)}>
  <Toggle.Label>Off</Toggle.Label>
  <Toggle.Control />
  <Toggle.Label>On</Toggle.Label>
  <Toggle.Error>Error message</Toggle.Error>
</Toggle>

Input

A compound text input field. The visible parts - label, the underlying <input>, and the error message - are composed as children. Validation styling (invalid) and aria-invalid are applied to the field, and the label, input, and error are wired together with the matching id / for / aria attributes.

Primitive	Description
`Input`	Root. Owns the field state (name, value, disabled/readonly/required/invalid) and change handlers.
`Input.Label`	Label for the input.
`Input.Field`	Renders the underlying `<input>` element.
`Input.Error`	Error message for the input.

Input primitive

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name; used as input id and label target.
`value`	`string`	Optional	-	Controlled input value.
`disabled`	`boolean`	Optional	`false`	Disables interaction and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the field required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) styling and `aria-invalid`.
`onChange`	`(event: InputEvent \| Event) => unknown`	Optional	-	Called when the input value changes.
`onEnter`	`(event: KeyboardEvent) => unknown`	Optional	-	Called when the user presses Enter inside the input.
`children`	`JSX.Element`	Required	-	`Input.Label`, `Input.Field` and `Input.Error` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Input.Label primitive

Attribute name	Type	Required/Optional	Default value	Description
`view`	`string`	Optional	-	Visual label variant forwarded to InputLabel.
`ariaLabel`	`string`	Optional	-	ARIA label override.
`children`	`JSX.Element`	Required	-	Label content.
`class`	`string`	Optional	-	CSS class name for the label element.
`id`	`string`	Optional	-	ID for the label element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Input.Field primitive

Attribute name	Type	Required/Optional	Default value	Description
`type`	`string`	Required	-	Native input type (e.g. `"text"`, `"email"`, `"password"`, `"number"`).
`placeholder`	`string`	Optional	-	Placeholder text.
`autofocus`	`boolean`	Optional	`false`	When true the input is focused on mount.
`autocomplete`	`string`	Optional	-	Native autocomplete attribute.
`minLength`	`number`	Optional	-	Native minlength attribute.
`maxLength`	`number`	Optional	-	Native maxlength attribute.
`min`	`number`	Optional	-	Native min attribute (numeric inputs).
`max`	`number`	Optional	-	Native max attribute (numeric inputs).
`height`	`string`	Optional	-	CSS height applied as inline style.
`width`	`string`	Optional	-	CSS width applied as inline style.
`padding`	`string`	Optional	-	CSS padding applied as inline style.
`textAlign`	`CSS.Property.TextAlign`	Optional	-	CSS text-align applied as inline style.
`inputMode`	`string`	Optional	-	Native inputmode hint.
`pattern`	`string`	Optional	-	Native pattern attribute.
`iconLeft`	`boolean`	Optional	`false`	When true reserves padding for a left icon.
`iconRight`	`boolean`	Optional	`false`	When true reserves padding for a right icon.
`ref`	`HTMLInputElement`	Optional	-	Ref to the underlying input element.
`id`	`string`	Optional	Field `name` from context	ID for the input element.
`class`	`string`	Optional	-	CSS class for the input element.
`classList`	`Record<string, boolean>`	Optional	-	Conditional CSS classes for the input element.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles merged with the field's internal style.

Input.Error primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Error message content.
`class`	`string`	Optional	-	CSS class name for the error element.
`id`	`string`	Optional	Input's aria error id	ID for the error element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Input name="email" onChange={(e) => console.log(e.target)}>
  <Input.Label>Email</Input.Label>
  <Input.Field type="email" placeholder="you@example.com" />
  <Input.Error>Invalid email</Input.Error>
</Input>

Checkbox

A compound checkbox. The visible parts - the box control, label, and error message - are composed as children. The label is natively associated with the input via for (clicking it toggles the control) and can be placed before or after the control to render it on the left or right. Validation styling (invalid) is applied to the control, and an ariaLabel provides an accessible name when no visible label is composed.

Primitive	Description
`Checkbox`	Root. Owns the field state (name, checked, disabled/readonly/required/invalid) and change handler.
`Checkbox.Control`	The visual checkbox box, showing the tick icon when checked.
`Checkbox.Label`	Label for the checkbox, natively associated with the input via `for`.
`Checkbox.Error`	Error message for the checkbox. Rendered in place; nothing is shown while empty.

Checkbox primitive

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name; used as input id and label target.
`checked`	`boolean`	Optional	`false`	Initial checked state.
`disabled`	`boolean`	Optional	`false`	Disables interaction and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the field required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) border.
`ariaLabel`	`string`	Optional	-	ARIA label for screen readers when no visible label is composed.
`onChange`	`(event: Event) => unknown`	Optional	-	Called when the checked state changes.
`children`	`JSX.Element`	Required	-	`Checkbox.Control`, `Checkbox.Label` and `Checkbox.Error` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Checkbox.Control primitive

Checkbox.Control takes no props - it renders the box (with the tick icon when checked) and reads the checkbox state from context.

Checkbox.Label primitive

Attribute name	Type	Required/Optional	Default value	Description
`ariaLabel`	`string`	Optional	-	ARIA label override.
`children`	`JSX.Element`	Required	-	Label content.
`class`	`string`	Optional	-	CSS class name for the label element.
`id`	`string`	Optional	-	ID for the label element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Checkbox.Error primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Error message content.
`class`	`string`	Optional	-	CSS class name for the error element.
`id`	`string`	Optional	Control's aria error id	ID for the error element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Checkbox name="acceptTerms" required onChange={(e) => console.log(e)}>
  <Checkbox.Control />
  <Checkbox.Label>I accept the terms</Checkbox.Label>
  <Checkbox.Error>This field is required</Checkbox.Error>
</Checkbox>

Textarea

A compound multi-line text field.The visible parts - label, the underlying <textarea>, and the error message - are composed as children. Validation styling (invalid) and aria-invalid are applied to the field, and the label, textarea, and error are wired together with the matching id / for / aria attributes.

Primitive	Description
`Textarea`	Root. Owns the field state (name, value, disabled/readonly/required/invalid) and change handler.
`Textarea.Label`	Label for the textarea.
`Textarea.Field`	Renders the underlying `<textarea>` element.
`Textarea.Error`	Error message for the textarea.

Textarea primitive

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name; used as textarea id and label target.
`value`	`string`	Optional	-	Controlled textarea value.
`disabled`	`boolean`	Optional	`false`	Disables interaction and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the field required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) styling and `aria-invalid`.
`onChange`	`(event: InputEvent \| Event) => unknown`	Optional	-	Called when the textarea value changes.
`children`	`JSX.Element`	Required	-	`Textarea.Label`, `Textarea.Field` and `Textarea.Error` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Textarea.Label primitive

Attribute name	Type	Required/Optional	Default value	Description
`view`	`string`	Optional	-	Visual label variant forwarded to InputLabel.
`ariaLabel`	`string`	Optional	-	ARIA label override.
`children`	`JSX.Element`	Required	-	Label content.
`class`	`string`	Optional	-	CSS class name for the label element.
`id`	`string`	Optional	-	ID for the label element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Textarea.Field primitive

Attribute name	Type	Required/Optional	Default value	Description
`placeholder`	`string`	Required	-	Placeholder text.
`autofocus`	`boolean`	Optional	`false`	When true the textarea is focused on mount.
`minLength`	`number`	Optional	-	Native minlength attribute.
`maxLength`	`number`	Optional	-	Native maxlength attribute.
`rows`	`number`	Optional	-	Native rows attribute.
`cols`	`number`	Optional	-	Native cols attribute.
`maxWidth`	`string`	Optional	-	CSS max-width applied as inline style.
`height`	`string`	Optional	-	CSS height applied as inline style.
`width`	`string`	Optional	-	CSS width applied as inline style.
`resize`	`Property.Resize`	Optional	-	CSS resize behaviour applied as inline style.
`ref`	`HTMLTextAreaElement`	Optional	-	Ref to the underlying textarea element.
`class`	`string`	Optional	-	CSS class for the textarea element.
`classList`	`Record<string, boolean>`	Optional	-	Conditional CSS classes for the textarea element.

Textarea.Error primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Error message content.
`class`	`string`	Optional	-	CSS class name for the error element.
`id`	`string`	Optional	Textarea's aria error id	ID for the error element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Textarea name="comment" onChange={(e) => console.log(e.target)}>
  <Textarea.Label>Your comment</Textarea.Label>
  <Textarea.Field placeholder="Type here..." rows={4} />
  <Textarea.Error>This field is required</Textarea.Error>
</Textarea>

Select

A compound dropdown select. The root holds the form-field state (name, options, selection, validation flags) and shares it via context. The visible parts - label, the clickable trigger box, the dropdown listbox, and the error message - are composed as children. The options are provided to the root as data (options), and Select.Content renders them. Validation styling (invalid) is applied to the control, and label / trigger / error are wired together with the matching id / aria attributes.

Primitive	Description
`Select`	Root. Owns the field state (name, options, selected, disabled/readonly/required/invalid, view, sizing).
`Select.Label`	Label for the select.
`Select.Trigger`	The clickable selector box (selected text / placeholder + chevron) that opens the dropdown.
`Select.Content`	The dropdown listbox of options (rendered from the Select's `options`).
`Select.Error`	Error message for the select.

Select primitive

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name.
`options`	`{ id: string; text: string }`	Required	-	The selectable options (`{ id, text }`).
`selected`	`string`	Optional	-	Id of the currently selected option.
`disabled`	`boolean`	Optional	`false`	Disables the control and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the field required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) styling.
`view`	`"default" \| "inline"`	Optional	`"default"`	Visual variant: `"default"` (boxed) or `"inline"` (underline).
`maxVisibleRows`	`number`	Optional	`4`	Max options visible before the dropdown scrolls.
`maxWidth`	`string`	Optional	-	CSS max-width applied to the root.
`onChange`	`(event: InputEvent \| Event) => unknown`	Optional	-	Called when a different option is selected.
`children`	`JSX.Element`	Required	-	`Select.Label`, `Select.Trigger`, `Select.Content` and `Select.Error` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Select.Label primitive

Attribute name	Type	Required/Optional	Default value	Description
`ariaLabel`	`string`	Optional	-	ARIA label override.
`children`	`JSX.Element`	Required	-	Label content.
`class`	`string`	Optional	-	CSS class name for the label element.
`id`	`string`	Optional	-	ID for the label element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

Select.Trigger primitive

Attribute name	Type	Required/Optional	Default value	Description
`placeholder`	`string`	Required	-	Text shown when nothing is selected.
`iconLeft`	`JSX.Element`	Optional	-	Icon rendered on the left of the box.

Select.Content primitive

Select.Content takes no props - it renders the dropdown listbox.

Select.Error primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Error message content.
`class`	`string`	Optional	-	CSS class name for the error element.
`id`	`string`	Optional	Select's aria error id	ID for the error element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<Select name="country" options={options} onChange={(e) => console.log(e.target)}>
  <Select.Label>Country</Select.Label>
  <Select.Trigger placeholder="Select a country" />
  <Select.Content />
  <Select.Error>Required</Select.Error>
</Select>

RadioGroup

A compound group of mutually exclusive radio options. The visible parts - a group label, the option rows (each with its control and label), and an error message - are composed as children. Every option shares the group's name. Validation styling (invalid) and aria-invalid are applied to the group, the group label is referenced via aria-labelledby, and each option label is natively associated with its radio input via for.

Primitive	Description
`RadioGroup`	Root. Owns the group state (name, selected, disabled/readonly/required/invalid) and change handler.
`RadioGroup.Label`	Group-level label (the question), referenced by the group's `aria-labelledby`.
`RadioGroup.Item`	A single option row. Owns the option `value` for its control and label.
`RadioGroup.Control`	The radio dot.
`RadioGroup.ItemLabel`	Per-option label, natively associated with its radio input via `for`.
`RadioGroup.Error`	Group-level error message.

RadioGroup primitive

Attribute name	Type	Required/Optional	Default value	Description
`name`	`string`	Required	-	Form field name; shared by every radio input in the group.
`selected`	`string`	Optional	-	Value of the currently selected option.
`disabled`	`boolean`	Optional	`false`	Disables every option and applies disabled styling.
`readonly`	`boolean`	Optional	`false`	Locks the value without the disabled cursor.
`required`	`boolean`	Optional	`false`	Marks the group required for form validation.
`invalid`	`boolean`	Optional	`false`	Applies the invalid (danger) styling and `aria-invalid`.
`onChange`	`(event: InputEvent \| Event) => unknown`	Optional	-	Called when a different option is selected.
`children`	`JSX.Element`	Required	-	`RadioGroup.Label`, `RadioGroup.Item` and `RadioGroup.Error` parts.
`class`	`string`	Optional	-	CSS class name for the root element.
`id`	`string`	Optional	-	ID for the root element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

RadioGroup.Label primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Label content.
`class`	`string`	Optional	-	CSS class name for the label element.
`id`	`string`	Optional	-	ID for the label element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

RadioGroup.Item primitive

Attribute name	Type	Required/Optional	Default value	Description
`value`	`string`	Required	-	Value submitted when this option is selected.
`disabled`	`boolean`	Optional	`false`	Disables this option only.
`children`	`JSX.Element`	Required	-	`RadioGroup.Control` and `RadioGroup.ItemLabel` parts.
`class`	`string`	Optional	-	CSS class name for the row element.
`id`	`string`	Optional	-	ID for the row element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

RadioGroup.Control primitive

RadioGroup.Control takes no props - it renders the radio dot and reads name / selected / disabled / readonly / invalid from the group context and value from the enclosing RadioGroup.Item.

RadioGroup.ItemLabel primitive

Attribute name	Type	Required/Optional	Default value	Description
`ariaLabel`	`string`	Optional	-	ARIA label override.
`children`	`JSX.Element`	Required	-	Label content.
`class`	`string`	Optional	-	CSS class name for the label element.
`id`	`string`	Optional	-	ID for the label element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

RadioGroup.Error primitive

Attribute name	Type	Required/Optional	Default value	Description
`children`	`JSX.Element`	Required	-	Error message content.
`class`	`string`	Optional	-	CSS class name for the error element.
`id`	`string`	Optional	Group's aria error id	ID for the error element.
`classList`	`Record<string, boolean>`	Optional	-	Object for conditional CSS classes.
`style`	`Record<string, string \| undefined>`	Optional	-	Inline styles as a key-value object.

<RadioGroup name="plan" selected="monthly" onChange={(e) => console.log(e.target)}>
  <RadioGroup.Label>Choose a plan</RadioGroup.Label>
  <RadioGroup.Item value="monthly">
    <RadioGroup.Control />
    <RadioGroup.ItemLabel>Monthly</RadioGroup.ItemLabel>
  </RadioGroup.Item>
  <RadioGroup.Item value="yearly">
    <RadioGroup.Control />
    <RadioGroup.ItemLabel>Yearly</RadioGroup.ItemLabel>
  </RadioGroup.Item>
  <RadioGroup.Error>Please choose a plan</RadioGroup.Error>
</RadioGroup>

Last updated: August 11, 2026

SolidJS Components

Show

For

Switch and Match

Piano Components

PianoPrimaryButton

PianoSecondaryButton

PianoGhostButton

PianoIconButton

PianoCloseButton

PianoStartCheckoutButton

PianoBuyAsAGiftButton

Example

Forms

PianoInput

PianoCheckbox

PianoToggle

PianoTextarea

PianoRadioButton

PianoRadioGroup

PianoSelect

Typography

PianoHeadline

PianoSubHeadline

PianoText

PianoAccentedText

Complex

PianoHeader

PianoTabs

PianoTab

PianoCountdown

Utility

PianoImg

PianoUserName

PianoExternalEvent

A

PianoLocaleSelector

PianoUserControl

T (Translate)

MediaQuery

Primitives

Header

Header primitive

Header.Group primitive

CloseButton

CloseButton primitive

CloseButton.Icon primitive

Countdown

Countdown primitive

Countdown.Title primitive

Countdown.Timer primitive

Countdown.Unit primitive

Countdown.Separator primitive

Tabs

Tabs primitive

Tabs.List primitive

Tabs.Trigger primitive

Tabs.Content primitive

Toggle

Toggle primitive

Toggle.Control primitive

Toggle.Label primitive

Toggle.Error primitive

Input

Input primitive

Input.Label primitive

Input.Field primitive

Input.Error primitive

Checkbox

Checkbox primitive

Checkbox.Control primitive

Checkbox.Label primitive

Checkbox.Error primitive

Textarea

Textarea primitive

Textarea.Label primitive

Textarea.Field primitive

Textarea.Error primitive

Select

Select primitive