Chip Input

Tag Input with Suggestions

<div class="chips" role="region" aria-label="Tag input">
				<!-- Existing chip -->
				<span class="chip">
				React
				<button class="remove" aria-label="Remove React">&times;</button>
				</span>

				<!-- Input field -->
				<input type="text" placeholder="Add more tags..." aria-label="Add new tag">
				</div>

				<!-- Suggestions -->
				<ul class="suggestions">
				<li class="">JavaScript</li>
				<li class="">CSS</li>
				</ul>

Email Recipients

<div class="chips" role="region" aria-label="Email recipients">
				<span class="chip">
				alice@example.com
				<button class="remove" aria-label="Remove alice@example.com">&times;</button>
				</span>
				<input type="email" placeholder="Add email..." aria-label="Add email recipient">
				</div>

Structure

• `.chips` - Flex wrapper for chips and input
• `.chip` - Individual chip with remove button
• `.remove` - Unstyled button for deletion
• `` - Native text input for new entries
• `.suggestions` - Unordered list of suggestions
• `li` - Clickable suggestion item
• `role="region"` - ARIA landmark for chip area

Key Features

• Semantic HTML - Native ``, ``, `
  `, `
  • ` elements
  • Single Classes - Only `.chip`, `.chips`, `li`
  • ARIA Complete - `role="region"`, `aria-label`, semantic button labels
  • Flex Layout - Wrapping chips with flexible input
  • Remove Buttons - Easy deletion with × button
  • Suggestions - Clickable list of options
  • Design Tokens - All colors, spacing from var(--a-*)
  • Keyboard Support - Enter to add, Backspace to remove

Use Cases

• Tags/Keywords - Article tagging and filtering
• Email Recipients - To, CC, BCC fields
• Skills/Interests - User profile setup
• Team Members - Multi-user selection
• Permissions - Grant access to multiple users
• Filtering - Multi-select filter tags

Accessibility

• Use semantic HTML elements: ``, ``, `
  `, `
  • `
  • Include `aria-label` on remove buttons and input
  • Use `role="region"` to mark chip container
  • Support keyboard navigation (Tab, Enter, Backspace)
  • Announce chip additions/removals to screen readers
  • Maintain focus management when removing chips
  • Provide clear labeling for input fields

Responsive Behavior

Input fields adapt for optimal usability:

Mobile (< 768px)

• Full-width within container
• Minimum height 44px (touch target)
• Large text size (16px+) prevents zoom
• Appropriate touch keyboard displays
• Error messages clearly visible

Desktop (1024px+)

• Width based on input type/length
• Hover and focus states visible
• Inline labels possible
• Autocomplete suggestions clear

Framework Integration

• Responsive sizing automatic
• Labels stack on mobile
• Error states responsive
• Accessibility maintained

Best Practices

• Always provide remove buttons (× or trash icon)
• Validate input before adding (no duplicates)
• Show relevant suggestions for quick entry
• Make chips visually distinct from input area
• Support full keyboard accessibility
• Display count of chips added
• Clear input field after chip is added
• Handle backspace to delete last chip