How to get the values of chips in Tailwind Elements?

180 Views Asked by At

has anyone used the tailwind elements' tags? Check it here I am new to tailwind (new to web dev in general) and I just wanted a tagging system for my website. So I have a form that includes the code to have this Now I wanted to save these tags in the database and in enums, and I'm not really sure how to get the entered tags of the user.

I'm a newcomer to web development and Tailwind CSS, and I'm currently working on adding a tagging system to my website. I've created a form that resembles the one shown in this image. My goal is to store these tags in the database as enums, but I'm uncertain about how to retrieve the user-entered tags.

I am using laravel so I have them in a blade, the tags input box is in a component that has this code I got from the site:

<div
  id="chips-initial"
  data-te-chips-initial
  class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text">
</div>
<input type="text" id="tags" name="tags" class="bg-gray-900 border border-white">

and this is the js:

import {
    ChipsInput,
    initTE,
  } from "tw-elements";


  initTE({ ChipsInput });

  const tagsInput = document.querySelector("#chips-initial");
  const tagsArray = [];
  const tagsInputInstance = new ChipsInput(tagsInput, {
      initialValues: [],
      labelText:"Tags",
  });

I'd like to implement a tagging system similar to the one used here on Stack Overflow. How can I achieve this using Laravel and Tailwind CSS?

0

There are 0 best solutions below