uni-input-list

<uni-input-list /> is an encapsulated Web Component built upon the foundation of the uniopen design language. It combines the functionality of <uni-input-field /> and <uni-chip /> into an interactive multi-select interface.

Implementation is straightforward: simply slot your <uni-input-field /> and <uni-chip /> components into their designated slots. The component automatically manages focus states to expand the list when active, seamlessly adapting user selections to display within the input while adhering to native HTML form behaviors and uniopen design specifications.

Basic Usage

<uni-input-list /> is a web component. All we need to do is put the required script into your HTML document. Then follow <uni-input-list />'s html structure and everything will be all set.

• Required Script

  <script
    type="module"
    src="https://unpkg.com/uni-input-list/mjs/wc-uni-input-list.js">        
  </script>

• Structure

  Put <uni-input-list /> into HTML document. It will have different functions and looks with attribute mutation.

  <uni-input-list>
    <!-- input -->
    <uni-input-field slot="input">
      <input
        slot="input"
        type="text"
        placeholder="placeholder"
        readonly
      />
    </uni-input-field>
  
    <!-- chips -->
    <uni-chip slot="list" theme="subtle">
      <input
        slot="chip"
        data-content="Chip A"
        type="checkbox"
        name="uni-chip"
        value="Value A"
        checked
      />
    </uni-chip>
    <uni-chip slot="list" theme="subtle">
      <input
        slot="chip"
        data-content="Chip B"
        type="checkbox"
        name="uni-chip"
        value="Value B"
      />
    </uni-chip>
  </uni-input-list>

JavaScript Instantiation

<uni-input-list /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { UniInputList } from 'https://unpkg.com/uni-input-list/mjs/wc-uni-input-list.js';

const inputTemplate = document.querySelector('.my-input-template');
const chipTemplate = document.querySelector('.my-chip-template');

// use DOM api
const nodeA = document.createElement('uni-input-list');
nodeA.appendChild(inputTemplate.content.cloneNode(true));
nodeA.appendChild(chipTemplate.content.cloneNode(true));
document.body.appendChild(nodeA);

// new instance with Class
const nodeB = new UniInputList();
nodeB.appendChild(inputTemplate.content.cloneNode(true));
nodeB.appendChild(chipTemplate.content.cloneNode(true));
document.body.appendChild(nodeB);
</script>

Mathods

| Mathod Signature | Description | | ----------- | ----------- | | showPopover() | Shows the options list of <uni-input-list />.. | | hidePopover() | Hides the options list of <uni-input-list />. | | togglePopover(force) | Toggles the visibility of the options list. The optional force parameter allows you to explicitly show (true) or hide (false) the popover. |

Reference

• <uni-input-list /> demo
• YouTube tutorial
• <uni-input-field />
• <uni-chip />