Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions scripts/validate-want.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const __dirname = path.dirname(__filename);
const VALID_STATUSES = ['discussing', 'complete', 'in-progress'];
const VALID_LINK_TYPES = ['spec', 'draft', 'article', 'proposal', 'project'];
const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
const OBJECTID_REGEX = /^[0-9a-f]{24}$/i; // MongoDB ObjectId hex string format (24 hex chars) for legacy submissions
const DATE_REGEX = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;

class ValidationError extends Error {
Expand Down Expand Up @@ -99,17 +100,20 @@ function validateNumber(number) {
if (!number) {
throw new ValidationError('Missing required field: number');
}
// Can be either a UUID or a legacy numeric ID
// Can be either a UUID, MongoDB ObjectId, or a legacy numeric ID
if (typeof number === 'string' && UUID_REGEX.test(number)) {
return; // Valid UUID
}
if (typeof number === 'string' && OBJECTID_REGEX.test(number)) {
return; // Valid MongoDB ObjectId (legacy)
}
if (typeof number === 'number' && number > 0) {
return; // Valid legacy numeric ID
}
if (typeof number === 'string' && /^\d+$/.test(number)) {
return; // Valid numeric string
}
throw new ValidationError(`Invalid number format: ${number}. Must be UUID or positive integer`);
throw new ValidationError(`Invalid number format: ${number}. Must be UUID, ObjectId, or positive integer`);
}

function validateTags(tags) {
Expand Down
36 changes: 36 additions & 0 deletions wants/60f4aacb952fb3beac8eaa21.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: I want a token field element
date: 2021-07-18T22:27:23.367Z
submitter: Sam Henri-Gold
number: 60f4aacb952fb3beac8eaa21
tags:
- html
- forms
- ux
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/425
status: discussing
related:
- title: "HTML Standard - Forms"
url: https://html.spec.whatwg.org/#forms
type: spec
---

I want a standard, accessible HTML form element similar to macOS's token field for addresses and item tags.

Token fields (also known as tag inputs or chip inputs) are common UI patterns used across many applications for entering multiple discrete values like email addresses, tags, or categories. Currently, developers must create custom implementations using JavaScript, which often results in inconsistent accessibility and user experience.

A native token field element would provide:

- **Consistent user experience** across different websites and applications
- **Built-in accessibility** with proper ARIA attributes and keyboard navigation
- **Mobile-friendly interaction** patterns optimized for touch devices
- **Standardized styling** that can be customized with CSS while maintaining core functionality
- **Form integration** that works seamlessly with existing form submission and validation

This would be particularly valuable for:
- Email address entry (To, CC, BCC fields)
- Tagging systems (blog tags, categories, labels)
- Multi-select with custom values
- Contact lists and address management

By standardizing this common pattern, we can improve accessibility and reduce the JavaScript overhead currently required for this functionality.