Morpheus: Web Components UI Kit

Datalist#

Component <neo-datalist> is an option-data container, not a rendered or interactive element. Modeled on native <datalist>, it carries <neo-option> / <neo-optgroup> data that control components like Select, Combobox, or Text input suggestions read. Place a datalist inside a control as its option source, or give it an id and point one or more controls at it with list="<id>", exactly like <input list>.

Reference#

Attributes #

Name	Type	Default	Description
`id`	`string` observed	none	Names the datalist so controls can reference it. A control opts in with `list="<id>"` (like native `<input list>`); one id can feed several controls. Omit it for an inline datalist placed inside a single control. An inline datalist (or a control's own authored options) always wins over a referenced external one.

Slots #

Name	Description
default	`<neo-option>` and `<neo-optgroup>` option data: the same children a `<neo-select>` / `<neo-combobox>` takes. The element is not interactive; the consuming control reads this data and owns the trigger, listbox, keyboard, and selection. Patching these children re-syncs every control the datalist feeds.

Examples#

Shared across controls#

One <neo-datalist id="…"> supplies the same options to every control whose list="<id>" references it.

A control opts in with list set to the datalist's id, just like native <input list>. One id can feed many controls.
The datalist itself renders nothing; each control reads it and renders its own way: Select and Combobox as listbox options, Text input as free-text suggestions. Selection stays per-control.
Patching the datalist (server morph, edit) updates every control it feeds, with no per-control patch.

Hide

HTML

Templ

CSS

<neo-datalist id="shared-tz-opts">
  <neo-optgroup role="group" label="Americas" aria-label="Americas">
    <neo-option
      role="option"
      tabindex="-1"
      aria-selected="false"
      value="America/New_York"
      data-neo-value="America/New_York"
      label="New York"
    >New York<small class="datalist-shared-utc">UTC−05:00</small></neo-option>
    <neo-option
      role="option"
      tabindex="-1"
      aria-selected="false"
      value="America/Sao_Paulo"
      data-neo-value="America/Sao_Paulo"
      label="São Paulo"
    >São Paulo<small class="datalist-shared-utc">UTC−03:00</small></neo-option>
  </neo-optgroup>
  <neo-optgroup role="group" label="Europe" aria-label="Europe">
    <neo-option
      role="option"
      tabindex="-1"
      aria-selected="false"
      value="Europe/London"
      data-neo-value="Europe/London"
      label="London"
    >London<small class="datalist-shared-utc">UTC+00:00</small></neo-option>
    <neo-option
      role="option"
      tabindex="-1"
      aria-selected="false"
      value="Europe/Berlin"
      data-neo-value="Europe/Berlin"
      label="Berlin"
    >Berlin<small class="datalist-shared-utc">UTC+01:00</small></neo-option>
  </neo-optgroup>
  <neo-optgroup
    role="group"
    label="Asia &amp; Pacific"
    aria-label="Asia &amp; Pacific"
  >
    <neo-option
      role="option"
      tabindex="-1"
      aria-selected="false"
      value="Asia/Tokyo"
      data-neo-value="Asia/Tokyo"
      label="Tokyo"
    >Tokyo<small class="datalist-shared-utc">UTC+09:00</small></neo-option>
    <neo-option
      role="option"
      tabindex="-1"
      aria-selected="false"
      value="Australia/Sydney"
      data-neo-value="Australia/Sydney"
      label="Sydney"
    >Sydney<small class="datalist-shared-utc">UTC+11:00</small></neo-option>
  </neo-optgroup>
</neo-datalist>
<div class="datalist-shared-row">
  <neo-select
    list="shared-tz-opts"
    placeholder="From…"
    follow-scroll="until-trigger-invisible"
    aria-label="From time zone"
    id="tz-from"
  ></neo-select>
  <neo-combobox
    list="shared-tz-opts"
    placeholder="To…"
    search-placeholder="Search time zones…"
    follow-scroll="until-trigger-invisible"
    aria-label="To time zone"
    id="tz-to"
  ></neo-combobox>
  <neo-textinput
    aria-label="Time zone note"
    class="datalist-shared-note"
    id="tz-note"
    list="shared-tz-opts"
    placeholder="Type a time zone…"
  ></neo-textinput>
</div>

package examples

import "github.com/romshark/morpheus/neo"

templ DatalistShared() {
	@neo.Datalist(neo.DatalistOpts{ID: neo.Set("shared-tz-opts")}) {
		@neo.OptGroup(neo.OptGroupOpts{Label: neo.Set("Americas")}) {
			@neo.Option(neo.OptionOpts{Value: neo.Set("America/New_York"), Label: neo.Set("New York")}) {
				New York<small class="datalist-shared-utc">UTC−05:00</small>
			}
			@neo.Option(neo.OptionOpts{Value: neo.Set("America/Sao_Paulo"), Label: neo.Set("São Paulo")}) {
				São Paulo<small class="datalist-shared-utc">UTC−03:00</small>
			}
		}
		@neo.OptGroup(neo.OptGroupOpts{Label: neo.Set("Europe")}) {
			@neo.Option(neo.OptionOpts{Value: neo.Set("Europe/London"), Label: neo.Set("London")}) {
				London<small class="datalist-shared-utc">UTC+00:00</small>
			}
			@neo.Option(neo.OptionOpts{Value: neo.Set("Europe/Berlin"), Label: neo.Set("Berlin")}) {
				Berlin<small class="datalist-shared-utc">UTC+01:00</small>
			}
		}
		@neo.OptGroup(neo.OptGroupOpts{Label: neo.Set("Asia & Pacific")}) {
			@neo.Option(neo.OptionOpts{Value: neo.Set("Asia/Tokyo"), Label: neo.Set("Tokyo")}) {
				Tokyo<small class="datalist-shared-utc">UTC+09:00</small>
			}
			@neo.Option(neo.OptionOpts{Value: neo.Set("Australia/Sydney"), Label: neo.Set("Sydney")}) {
				Sydney<small class="datalist-shared-utc">UTC+11:00</small>
			}
		}
	}
	<div class="datalist-shared-row">
		@neo.SelectAttrs(neo.SelectOpts{List: neo.Set("shared-tz-opts"), Placeholder: neo.Set("From…")}, templ.Attributes{
			"id":         "tz-from",
			"aria-label": "From time zone",
		})
		@neo.ComboboxAttrs(neo.ComboboxOpts{List: neo.Set("shared-tz-opts"), Placeholder: neo.Set("To…"), SearchPlaceholder: neo.Set("Search time zones…")}, templ.Attributes{
			"id":         "tz-to",
			"aria-label": "To time zone",
		})
		@neo.TextInputAttrs(neo.TextInputOpts{List: neo.Set("shared-tz-opts"), Placeholder: neo.Set("Type a time zone…")}, templ.Attributes{
			"id":         "tz-note",
			"aria-label": "Time zone note",
			"class":      "datalist-shared-note",
		})
	</div>
}

A wider screen, please

Datalist#

Reference#

Attributes #

Slots #

Examples#

Shared across controls#

Settings

Theme

Accessibility

Playgrounds

Server Simulator