logo polydile dile-components


Web Component to create a interface useful to create "order filter".


npm i @dile/dile-order-switch


Import the component.

import '@dile/dile-order-switch/dile-order-switch.js';

Use the component.

<dile-order-switch name="name" label="Name"></dile-order-switch>

This component does not to order anything bi itself. Yo can use to create a switch order from ascendent to descendent useful to search result listings.



Custom Events

This component implements the DileEmmitChangeMixin mixin, so it dispached a custom event:

  name: "order_name_element",
  value "asc"

CSS Custom Properties

You can customize the icon color and size using dile-icon CSS Custom Properties.

dile-order-switch demos

Default order switch

class MyComponent extends LitElement {
  render() {
    return html`
      <dile-order-switch id="order" name="name" label="Name"></dile-order-switch>
      <p>To change the order do a click on the component. Also you can change from outside with the toggle method, using this <button id="change">Change button</button>.
        The order is <span id="ordervalue">asc</span>
  firstUpdated() {
    this.shadowRoot.getElementById('change').addEventListener('click', () => {
    this.shadowRoot.getElementById('order').addEventListener('element-changed', (e) => {
      this.shadowRoot.getElementById('ordervalue').innerText = e.detail.value;
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;

Styled order switch

  dile-order-switch {
    color: blue;
    font-size: 1.5rem;
    font-weight: bold;
    --dile-icon-size: 2rem;
    --dile-icon-color: blue;
<dile-order-switch id="order" name="stock" label="Stock units" value="desc"></dile-order-switch>