Tag Input field

This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

This tailwind example is contributed by Ranit Saha, on 11-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Other Badge Tag Cloud

Author Ranit Saha

Tailwind v3.4 2.7k 3

Fork Fullscreen

input.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' && input.value.trim() !== '') {
      event.preventDefault();
      const newTag = input.value.trim();
      if (tags.length >= 5) {
        // Show error if the tag limit is exceeded
        errorMessage.classList.remove('hidden');
        return;
      } else {
        errorMessage.classList.add('hidden');
      }

if (!tags.includes(newTag)) {
        tags.push(newTag);
        renderTags();
      }
      input.value = '';
    }
  });

const removeTag = (index) => {
    tags.splice(index, 1);
    renderTags();
    errorMessage.classList.add('hidden'); // Hide error message if a tag is removed
  };
</script>

Related Examples

Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

nejaa badr

1 year ago

2.4k
chat bar
live chat

gidy

1 year ago

2.2k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Abhiraj

1 year ago

3k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Walid Ahmad

1 year ago

1.8k
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Azeem warraich

1 month ago

187
Pinterest-Style Masonry Gallery
A Pinterest-inspired masonry gallery featuring images of different heights in a seamless multi-column layout.

JUGENDRA GANGWAR

3 months ago

187
Tag links component

Arya

3 years ago

10.2k
Button Group

TailwindFlex

4 years ago

10k
NFT Header with Hero

Abdul Baset Bappy

1 year ago

1.9k
Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

11k
Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13k
Maintenance page

Faye

1 year ago

2.7k