Use Avonni components in your own LWC

The Avonni Components package (listed on AppExchange as Avonni LWC Components) lets you use Avonni components in the templates of your own Lightning web components. Reference them with the avonni namespace, for example <avonni-combobox>. No JavaScript import is needed.

Before you start, install the package, assign licenses in Setup under Installed Packages > Manage Licenses, and assign the package permission set to developers and end users.

1. Select the LWC platform on any example, open the Code tab and copy the snippet.
2. Paste the markup into your component’s HTML template. Attributes are the kebab-case form of the property names: allowSearch becomes allow-search.
3. Write text and numbers as attribute values. Write a true boolean as a bare attribute, such as required, and leave it out when it is false: never write required="false", because any string value counts as true.
4. Set arrays and objects from JavaScript. Declare them as class fields and bind them in the template, as with options={options} below.
5. Listen to events with on attributes, such as onchange, and read event.detail. The Events tab of each component lists its events; the combobox change event carries the selected value in event.detail.value.
6. Deploy your component and add it to a page as usual.

<template>
    <avonni-combobox
        label="Case reason"
        options={options}
        placeholder="Search reasons"
        allow-search
        required
        value={value}
        onchange={handleChange}
    ></avonni-combobox>
</template>

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    options = [
        {
            label: 'Billing question',
            value: 'billing',
            secondaryText: 'Invoices, refunds and payment methods'
        },
        {
            label: 'Technical issue',
            value: 'technical',
            secondaryText: 'Errors, outages and bugs'
        },
        {
            label: 'Account access',
            value: 'access',
            secondaryText: 'Login and password help'
        },
        {
            label: 'Product feedback',
            value: 'feedback',
            secondaryText: 'Ideas and feature requests'
        }
    ];
    value = 'technical';

    handleChange(event) {
        this.value = event.detail.value;
    }
}