shadcn.io is not affiliated with official shadcn/ui
Array Fields Domain List Form Block for React
An allowed sign-up domains list: one text field per row, Add and Remove, Enter to append, pasting a list to split it into rows, each row checked as a domain with repeats named, and an empty state for no limit.
Installation
Overview
Edit a list of values without losing your place, with this array fields form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. A band heading counts the rows ("3 of 10"); each row is one domain in an Input with a Remove button, up to ten. Add domain, or Enter in the last row, appends a row and focuses it; Enter in any other row moves to the next. Pasting several domains separated by lines, commas or spaces splits them into rows. Each row is checked as a domain and a repeat is flagged by name, in a line that is always reserved under the row. Remove moves focus to the row before it, or to Add. With no rows an Empty state says any email domain can sign up, and Save says so too. Save domains names the first problem and focuses it. The Shine Button is the only colored control. It's built from Input, Button, Empty, Shine Button and Guides, with a CSS entrance only. For allow lists, redirect URLs, IP ranges and any list of single values.
FAQ
What does pasting do?
If the text holds two or more values separated by whitespace, commas or semicolons, the browser's paste is cancelled and the values become rows: the first fills the current row if it is empty, the rest follow it. Values past the tenth are dropped and the foot says how many were kept. A single value pastes normally.
Where does focus go?
Add focuses the new row's field, Enter in the last row adds a row, and Remove moves focus to the previous row or to Add, so a keyboard user never lands on the page. The foot's polite line says what happened, such as "Domain 3 added."
How is a domain checked?
Values are trimmed and lower-cased, then matched against a plain domain pattern (labels of letters, digits and hyphens, a dot, a top-level part of two letters or more). A repeat of an earlier row is named in the row's line. Empty rows are only a problem when you press Save.
How does it look on a phone?
The same single column: each row is a field and a Remove button, and the foot is pinned to the bottom with Save domains at full width.