List Component

A unified vocabulary list/selection component supporting multiple display modes: tree, dropdown, radio, and table.

<prez-list>

Interactive Preview

When to Use

Form inputs requiring concept selection
Browsing hierarchical vocabularies
Quick search in large vocabularies
Multi-select scenarios
Tabular display of vocabulary data

Display Modes

select (default)

Tree view with expand/collapse. Best for browsing hierarchical vocabularies.

dropdown

Dropdown button with tree popover. Best for form inputs.

radio

Radio button selection. Best for small vocabularies.

table

Tabular display with configurable columns. Best for data-heavy views.

Available Fields

Use the fields attribute to specify which fields to display (comma-separated).

Field	Description
`iri`	Concept IRI
`label`	Concept preferred label
`notation`	Concept notation
`description`	Concept description
`altLabels`	Alternative labels
`broader`	Broader concept IRIs
`narrower`	Narrower concept IRIs

Code Examples

Include the script tag in your HTML head or before the component. The component will auto-detect its base URL.

Properties

Property	Type	Default	Description
`vocab`	`string`	`—`	Vocabulary slug for auto-resolved URL
`vocab-url`	`string`	`—`	Direct URL to vocabulary JSON (overrides vocab)
`base-url`	`string`	`auto`	Base URL for vocab resolution
`type`	`string`	`"select"`	Display type: select, dropdown, radio, or table
`value`	`string`	`—`	Selected concept IRI (single mode)
`values`	`string[]`	`[]`	Selected IRIs as JSON array (multiple mode)
`flat`	`boolean`	`false`	Render as flat list instead of tree hierarchy
`search`	`boolean`	`false`	Show search/filter input
`multiple`	`boolean`	`false`	Enable multiple selection
`horizontal`	`boolean`	`false`	Horizontal layout (radio type only)
`fields`	`string`	`—`	Comma-separated fields for table columns (table type)
`max-level`	`number`	`1`	Tree expansion depth (-1=all, 0=collapsed)
`show-count`	`boolean`	`false`	Show descendant count on parent nodes
`show-description`	`boolean`	`false`	Show concept descriptions
`show-selected`	`boolean`	`true`	Highlight selected items
`placeholder`	`string`	`"Select..."`	Placeholder text (dropdown mode)
`disabled`	`boolean`	`false`	Disable the component
`lang`	`string`	`"en"`	Preferred language for labels
`theme`	`string`	`"auto"`	Color theme: "light", "dark", or "auto" (follows system)
`sparql-endpoint`	`string`	`—`	SPARQL endpoint URL — enables dynamic SPARQL mode
`vocab-iri`	`string`	`—`	ConceptScheme IRI (required in SPARQL mode)
`named-graph`	`string`	`—`	Named graph to query within (optional, SPARQL mode)
`timeout`	`number`	`10000`	Request timeout in ms (SPARQL mode)
`label-predicates`	`string`	`"skos:prefLabel,dcterms:title,rdfs:label"`	Comma-separated label predicates for SPARQL resolution
`description-predicates`	`string`	`"skos:definition,dcterms:description"`	Comma-separated description predicates for SPARQL resolution

Methods

loadVocab()Manually trigger vocabulary reload

Access methods via JavaScript:

const el = document.querySelector('prez-list');
el.loadVocab(); // Reload vocabulary data

Events

prez-changeFired when selection changes

Event Detail:

`value`	`string \| string[]`	Selected IRI(s)
`vocab`	`string`	Vocabulary slug
`concepts`	`object \| object[]`	Full concept data for selection

prez-loadFired when vocabulary loads successfully

Event Detail:

`vocab`	`string`	Vocabulary slug
`url`	`string`	Resolved vocabulary URL
`conceptCount`	`number`	Number of concepts loaded

prez-errorFired when loading fails

Event Detail:

`vocab`	`string`	Vocabulary slug
`url`	`string`	Attempted URL
`error`	`string`	Error message

Example:

document.querySelector('prez-list')
  .addEventListener('prez-click', (e) => {
    console.log('Clicked:', e.detail);
  });

Styling

Components use Shadow DOM with encapsulated styles. Customize appearance using inherited CSS properties or by wrapping in a styled container.

Inherited Properties

Property	Default	Description
`font-family`	`system-ui, sans-serif`	Font family inherited into shadow DOM
`font-size`	`0.875rem`	Base font size
`--prez-bg`	`auto`	Background color (auto-themed)
`--prez-text`	`auto`	Primary text color (auto-themed)
`--prez-border`	`auto`	Border color (auto-themed)
`--prez-primary`	`auto`	Primary brand color (auto-themed)

Examples

Basic Styling

Override inherited CSS properties

prez-list {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  width: 300px;
}

Full Width

Set component to fill container

prez-list {
  width: 100%;
  max-width: 400px;
}

Container Styling

Style the containing element

.vocab-container {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.vocab-container prez-list {
  width: 100%;
}

Installation

CDN / Script Tag

<script src="/web-components/prez-lite.min.js" type="module"></script>

npm (from GitHub)

# Public repo
npm install hjohns/prez-lite#subdirectory:packages/web-components

# Private repo (with token)
npm install git+https://<TOKEN>@github.com/hjohns/prez-lite.git#subdirectory:packages/web-components

npm (when published)

npm install @prez-lite/web-components

See the README for full installation and configuration details.