Ziro Components

A Ziro Project

<ziro-finder>

<ziro-finder> lets you search through a list and make selections.

Basic Example

Lord of the Rings Interstellar Avengers: End Game Alien Gone with the Wind The Hobbit Harry Potter Green Moon Blue Moon Orange Moon Red Moon Yellow Moon Example Moon

HTML

<ziro-finder placeholder="Search by movie title" hint="Movie title" query="">
  <ziro-item>Lord of the Rings</ziro-item>
  <ziro-item>Interstellar</ziro-item>
  <ziro-item>Avengers: End Game</ziro-item>
  <ziro-item>Alien</ziro-item>
  <ziro-item>Gone with the Wind</ziro-item>
  <ziro-item>The Hobbit</ziro-item>
  <ziro-item>Harry Potter</ziro-item>
  <ziro-item>Green Moon</ziro-item>
  <ziro-item>Blue Moon</ziro-item>
  <ziro-item>Orange Moon</ziro-item>
  <ziro-item>Red Moon</ziro-item>
  <ziro-item>Yellow Moon</ziro-item>
  <ziro-item>Example Moon</ziro-item>
</ziro-finder>

Plain Example

Lord of the Rings Interstellar Avengers: End Game Alien Gone with the Wind The Hobbit Harry Potter Green Moon Blue Moon Orange Moon Red Moon Yellow Moon Example Moon

HTML

<ziro-finder placeholder="Search by movie title" hint="Movie title" query="">
  <ziro-item layout="plain">Lord of the Rings</ziro-item>
  <ziro-item layout="plain">Interstellar</ziro-item>
  <ziro-item layout="plain">Avengers: End Game</ziro-item>
  <ziro-item layout="plain">Alien</ziro-item>
  <ziro-item layout="plain">Gone with the Wind</ziro-item>
  <ziro-item layout="plain">The Hobbit</ziro-item>
  <ziro-item layout="plain">Harry Potter</ziro-item>
  <ziro-item layout="plain">Green Moon</ziro-item>
  <ziro-item layout="plain">Blue Moon</ziro-item>
  <ziro-item layout="plain">Orange Moon</ziro-item>
  <ziro-item layout="plain">Red Moon</ziro-item>
  <ziro-item layout="plain">Yellow Moon</ziro-item>
  <ziro-item layout="plain">Example Moon</ziro-item>
</ziro-finder>