Domain Allowlist Input

ProNew

A token field for domains that normalises what is typed or pasted (URLs, www, ports, paths), accepts *.wildcards, rejects invalid names with the reason and ignores duplicates. Use this when people list allowed or blocked domains.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

allowWildcard

max1

label

Guide and examples

When to use it

Use it for allowed origins, email domains for sign-up, link allowlists and blocked sites, where people paste whatever they have (a full URL, a domain with a path) and expect a clean list.

Do not use it when entries are not hostnames. Use a generic token input.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`string[]`	-	Normalised domains (controlled).
`defaultValue`	`string[]`	`[]`	Initial domains.
`onValueChange`	`(domains: string[]) => void`	-	Runs on every change.
`allowWildcard`	`boolean`	`true`	Accept `*.example.com`.
`max`	`number`	-	Most domains.
`label`	`string`	`Allowed domains`	Names the field.

Accessibility

The field is a group named by label; chips are focusable and removable with Backspace or Delete, or with their Remove button.
Entries that fail show in a role="alert" line with the reason (not a valid domain, wildcards are not allowed).
Pasted URLs are normalised: https://www.Example.com:8080/a?b becomes www.example.com.
Additions, duplicates and the limit are announced in a polite status line.

Testing

The pattern ships with a Testing Library test (domain-allowlist-input.test.tsx) that covers normalisation, wildcard rules, rejected entries with reasons, duplicates and removing chips.

Guide and examples

When to use it

Use it for allowed origins, email domains for sign-up, link allowlists and blocked sites, where people paste whatever they have (a full URL, a domain with a path) and expect a clean list.

Do not use it when entries are not hostnames. Use a generic token input.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`string[]`	-	Normalised domains (controlled).
`defaultValue`	`string[]`	`[]`	Initial domains.
`onValueChange`	`(domains: string[]) => void`	-	Runs on every change.
`allowWildcard`	`boolean`	`true`	Accept `*.example.com`.
`max`	`number`	-	Most domains.
`label`	`string`	`Allowed domains`	Names the field.

Accessibility

The field is a group named by label; chips are focusable and removable with Backspace or Delete, or with their Remove button.
Entries that fail show in a role="alert" line with the reason (not a valid domain, wildcards are not allowed).
Pasted URLs are normalised: https://www.Example.com:8080/a?b becomes www.example.com.
Additions, duplicates and the limit are announced in a polite status line.

Testing

The pattern ships with a Testing Library test (domain-allowlist-input.test.tsx) that covers normalisation, wildcard rules, rejected entries with reasons, duplicates and removing chips.