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.

Let's see what can <uni-input-list /> do ?

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