Lineone - Text Editor

Input Tags

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

Enter Tags:

                
  <label class="block">
    <span>Enter Tags:</span>
    <input
      id="tom1"
      class="mt-1.5 w-full"
      placeholder="Enter tags"
      type="text"
    />
  </label>

  <!-- Javascript -->
  <script>
    const config1 = {
      create: true,
      plugins: ["caret_position", "input_autogrow"],
    };

    const tom1 = document.querySelector("#tom1");
    tom1._tom = new Tom(tom1, config1);
  </script>

Remove Button

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

Enter Tags:

                
  <label class="block">
    <span>Enter Tags:</span>
    <input
      id="tom2"
      class="mt-1.5 w-full"
      placeholder="Enter tags"
      type="text"
    />
  </label>

  <script>
    const config2 = {
      plugins: ["remove_button"],
      create: true,
      onItemRemove: function (val) {
        $notification({ text: `${val} removed` });
      },
    };

    const tom2 = document.querySelector("#tom2");
    tom2._tom = new Tom(tom2, config2);
  </script>

Restore on Backspace

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

Enter Tags:

                
  <label class="block">
    <span>Enter Tags:</span>
    <input
      class="mt-1.5 w-full"
      id="tom3"
      placeholder="Enter tags"
      value="awesome,neat"
      type="text"
    />
  </label>

  <!-- Javascript -->
  <script>
    const config3 = { plugins: ["restore_on_backspace"], create: true };

    const tom3 = document.querySelector("#tom3");
    tom3._tom = new Tom(tom3, config3);
  </script>

Clear Button

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

Enter Tags:

                
  <label class="block">
    <span>Enter Tags:</span>
    <input
      class="mt-1.5 w-full"
      id="tom4"
      placeholder="Enter tags"
      value="clear,items"
      type="text"
    />
  </label>

  <script>
    const config4 = {
      plugins: {
        clear_button: {
          title: "Remove all selected options",
        },
      },
      persist: false,
      create: true,
    };

    const tom4 = document.querySelector("#tom4");
    tom4._tom = new Tom(tom4, config4);
  </script>

Single Select

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

What type of event is it?

                
  <label class="block">
    <span>What type of event is it?</span>
    <select id="tom5" class="mt-1.5 w-full">
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </label>

  <script>
    const config5 = {
      create: true,
      sortField: { field: "text", direction: "asc" },
    };

    const tom5 = document.querySelector("#tom5");
    tom5._tom = new Tom(tom5, config5);
  </script>

Select Multiple

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

Select Countries

                
  <label class="block">
    <span>Select Countries</span>
    <select
      id="tom6"
      class="mt-1.5 w-full"
      multiple
      placeholder="Select a state..."
      autocomplete="off"
    >
      <option value="">Select a state...</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA" selected>California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="DC">District of Columbia</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
      <option value="NY">New York</option>
      <option value="NC">North Carolina</option>
      <option value="ND">North Dakota</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="OR">Oregon</option>
      <option value="PA">Pennsylvania</option>
      <option value="RI">Rhode Island</option>
      <option value="SC">South Carolina</option>
      <option value="SD">South Dakota</option>
      <option value="TN">Tennessee</option>
      <option value="TX">Texas</option>
      <option value="UT">Utah</option>
      <option value="VT">Vermont</option>
      <option value="VA">Virginia</option>
      <option value="WA">Washington</option>
      <option value="WV">West Virginia</option>
      <option value="WI">Wisconsin</option>
      <option value="WY" selected>Wyoming</option>
    </select>
  </label>

  <!-- Javascript -->
  <script>
    const tom6 = document.querySelector("#tom6");
    tom6._tom = new Tom(tom6);
  </script>

Custom HTML

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

Select Authors

                
  <label class="block">
    <span>Select Authors</span>
    <select
      class="mt-1.5 w-full"
      id="tom7"
      multiple
      placeholder="Select Authors..."
    ></select>
  </label>

  <!-- Javascript -->

  <script>
    const config7 = {
      valueField: "id",
      searchField: "title",
      options: [
        {
          id: 1,
          name: "John Doe",
          job: "Web designer",
          src: "images/avatar/avatar-20.jpg",
        },
        {
          id: 2,
          name: "Emilie Watson",
          job: "Developer",
          src: "images/avatar/avatar-11.jpg",
        },
        {
          id: 3,
          name: "Nancy Clarke",
          job: "Software Engineer",
          src: "images/avatar/avatar-7.jpg",
        },
      ],
      placeholder: "Select the author",
      render: {
        option: function (data, escape) {
          return `<div class="flex space-x-3">
                      <div class="avatar w-8 h-8">
                        <img class="rounded-full" src="${escape(
                          data.src
                        )}" alt="avatar"/>
                      </div>
                      <div class="flex flex-col">
                        <span> ${escape(data.name)}</span>
                        <span class="text-xs opacity-80"> ${escape(
                          data.job
                        )}</span>
                      </div>
                    </div>`;
        },
        item: function (data, escape) {
          return `<span class="badge rounded-full bg-primary dark:bg-accent text-white p-px mr-2">
                      <span class="avatar w-6 h-6">
                        <img class="rounded-full" src="${escape(
                          data.src
                        )}" alt="avatar">
                      </span>
                      <span class="mx-2">${escape(data.name)}</span>
                    </span>`;
        },
      },
    };

    const tom7 = document.querySelector("#tom7");
    tom7._tom = new Tom(tom7, config7);
  </script>

Disable Persist

Code

Tom Select is a versatile and dynamic <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on.

Enter Tags:

                
  <label class="block">
    <span>Enter Tags:</span>
    <input
      id="tom8"
      class="mt-1.5 w-full"
      placeholder="Enter tags"
      type="text"
    />
  </label>

  <!-- Javascript -->
  <script>
    const config8 = { create: true, persist: false };

    const tom8 = document.querySelector("#tom8");
    tom8._tom = new Tom(tom8, config8);
  </script>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Tom Select

Input Tags

Remove Button

Restore on Backspace

Clear Button

Single Select

Select Multiple

Custom HTML

Disable Persist