BEEQ components are standard Custom Elements and work in plain HTML without any framework or build tool. Load the stylesheet and the ES module script from a CDN and you’re ready to go.
Full page example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My BEEQ App</title>
<!-- BEEQ global styles -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@beeq/core/dist/beeq/beeq.css"
/>
<!-- BEEQ components (ES module) -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@beeq/core/dist/beeq/beeq.esm.js"
></script>
</head>
<body>
<bq-button appearance="primary" id="my-button">Click me!</bq-button>
<bq-checkbox id="my-checkbox">Accept terms & conditions</bq-checkbox>
<script type="module">
// Listen for a BEEQ custom event
const checkbox = document.querySelector('#my-checkbox');
checkbox.addEventListener('bqChange', (event) => {
console.log('Is checked?', event.detail.checked);
});
const button = document.querySelector('#my-button');
button.addEventListener('bqClick', (event) => {
console.log('Button clicked!', event.detail);
});
</script>
</body>
</html>
Custom events
BEEQ components emit custom DOM events in addition to the standard browser events (click, focus, etc.). All BEEQ custom events are prefixed with bq to prevent naming collisions with native events and other libraries.
Listen for them with the standard addEventListener API:
<bq-checkbox id="terms">I agree to the Terms & Conditions</bq-checkbox>
<script type="module">
const checkbox = document.querySelector('#terms');
checkbox.addEventListener('bqChange', (event) => {
console.log('Is checked?', event.detail.checked);
});
</script>
Common BEEQ events
| Event | Description |
|---|
bqChange | Emitted when the value of a form control changes |
bqClick | Emitted when the component is clicked |
bqFocus | Emitted when the component receives focus |
bqBlur | Emitted when the component loses focus |
bqClear | Emitted when the clear button inside an input is clicked |
Setting the icon base path
If you want to use the <bq-icon> component, you need to tell it where to load SVG files from. When using the CDN build, the simplest option is to point to an icon library CDN:
<script type="module">
import { setBasePath } from 'https://cdn.jsdelivr.net/npm/@beeq/core/dist/beeq/beeq.esm.js';
// Use Heroicons from a CDN (no local files needed)
setBasePath('https://cdn.jsdelivr.net/npm/[email protected]/24/outline');
</script>
<bq-icon name="bell" size="24"></bq-icon>
SVG icon assets are not embedded in the JS bundle. The <bq-icon> component fetches them on demand via HTTP. If you do not call setBasePath, icon components will not render any SVG.
Using components as regular HTML elements
BEEQ custom elements behave like regular HTML elements — you can set attributes, read properties, and respond to events just as you would with a native <input> or <button>:
<!-- Attributes work as expected -->
<bq-button appearance="link" size="large" disabled>Disabled link</bq-button>
<!-- Slots are used for projected content -->
<bq-input name="email" type="email" placeholder="[email protected]">
<label slot="label">Email address</label>
<bq-icon name="envelope" slot="prefix"></bq-icon>
</bq-input>
<!-- Set properties via JavaScript -->
<script type="module">
const input = document.querySelector('bq-input');
input.value = '[email protected]';
</script>
For production projects with a build step, consider using the framework-specific wrappers for better type safety and DX. See Angular, React, or Vue.