EntityTypeMultiPicker

Picks any number of entity types of a site, from a searchable list of everything the site has enabled.

Single and multi: EntityTypePicker takes one type.

Install

ReactSvelte

pnpm dlx shadcn@latest add https://sg-widgets.vercel.app/r/react/entity-type-multi-picker.json

pnpm dlx shadcn-svelte@latest add https://sg-widgets.vercel.app/r/svelte/entity-type-multi-picker.json

EntityTypeMultiPicker: allow and deny lists, summary modes, codes, sizes and states

ReactSvelte

Reduce motionRadius: themeRadius: noneRadius: smRadius: mdRadius: lgRadius: xl

React

Loading the React demo…

Svelte

Loading the Svelte demo…

Props

prop	type	default	meaning
summary	'chips' | 'ellipsis' | 'count'	'ellipsis'	What the control shows for the selection.
max	number	0	Chips drawn before the rest becomes +n. 0 lets the row fit what it can.
contextfrom EntityTypePicker	SgContext	required	The widget context. The site's enabled types are read through it, once per page.
value	string[]	[]	The chosen type codes, in the order they were ticked. Two-way in Svelte.
allowfrom EntityTypePicker	string[]	—	Codes on offer. Empty or absent means every enabled type.
denyfrom EntityTypePicker	string[]	—	Codes withheld, applied after allow.
showCodefrom EntityTypePicker	boolean	true	Shows the code under the display name where the two differ.
className / classfrom EntityTypePicker	string	—	Merged after the widget's own classes.
sizefrom PickerControl	'sm' | 'md' | 'lg'	'md'	Control height: 7, 8 and 9.
disabledfrom PickerControl	boolean	false
readonlyfrom EntityTypePicker	boolean	false	Keeps full contrast and removes the chevron and the clear control.
invalidfrom EntityTypePicker	boolean	false	Applies the invalid ring and aria-invalid.
clearablefrom EntityTypePicker	boolean	true	Show the clear control once something is chosen.
placeholder	string	'Select entity types'	Shown while nothing is chosen.
searchPlaceholderfrom EntityTypePicker	string	'Search types…'	Shown in the search box.
openfrom PickerControl	boolean	required	React: whether the popup is showing.
openfrom PickerControl	boolean	false	Svelte: whether the popup is showing, two-way.
emptyLabelfrom EntityTypePicker	string	'No match'	Shown when the search matches nothing.
loadingLabelfrom EntityTypePicker	string	'Loading…'	Names the skeletons a read stands behind, for a screen reader.
errorLabelfrom EntityTypePicker	string	—	Shown in place of what the failed read said.

Every row carries a checkbox and the list stays open across selections. Each selection is a chip in the control, with its own remove control.

chips makes the control a token field: every chip, wrapped, with the caret beside them, and +n after the last chip max allows. ellipsis makes it a one-line trigger: as many whole chips as the row fits, never a cut one, then +n inline after the last, the whole list in the tooltip, and the search box at the top of the popup. count makes it the same trigger reading 3 selected. A press on +n opens the list, where the hidden rows are.

allow is applied first and deny second, both to the derived list rather than to the read, so a caller narrowing the set sees the list change with no second call.

Events

event	payload	when
onValueChange	string[]	A type is ticked or unticked, or the clear control is pressed.
onOpenChangefrom EntityTypePicker	boolean	The popup opened or closed. Svelte also binds it with bind:open.

Slots

None.

Keyboard

key	does
any text	Narrows the rows, from the caret under chips and from the popup's search box otherwise.
Enter, Spacefrom EntityTypePicker	On the chevron, opens the list.
Down, Upfrom EntityTypePicker	Move the cursor through the rows and keep it in view. The last row holds it rather than wrapping.
ArrowDown / ArrowUpfrom PickerControl	Moves the highlight, and the list scrolls it into view.
Enter	Ticks or unticks the highlighted type. The list stays open.
Escapefrom EntityTypePicker	Close, keeping the value and clearing the query. On a closed picker it does nothing.
Backspace	In an empty search box, highlights the last chip. A second one removes it. Any other key releases it.
ArrowLeft / ArrowRightfrom PickerControl	On a chip, walks the row. ArrowRight past the last chip returns to the input.
Deletefrom PickerControl	On a chip, removes it and leaves the caret on its neighbour.
Tab	Moves through the chips' remove controls, then +n, the clear control and the chevron.

API behaviour

GET /schema returns every enabled type in about 12KB, custom slots included, and presence in that listing is the enablement test: a slot absent from it 404s everywhere else. The display name is the type’s name, and the key is what a URL and a dotted path take (002_schema).

Reference

The row, chip and checkbox anatomy follows shadcn’s Base UI Combobox, read through shadcn 4.21.0. The primitive underneath is Base UI Combobox 1.8.0 in React and Bits UI Combobox 2.19.1 in Svelte. shadcn-svelte ships no combobox item, so each widget composes the headless primitive of its framework and both draw the same rows, the same classes and the same states.