Morpheus: Web Components UI Kit

Input group#

Component <neo-input-group> is a layout wrapper that flushes leading and trailing addons (text, icons, buttons) against an <input> or <neo-textinput> under one merged border. DOM order decides placement; the group owns border, radius, and focus ring so the inner field drops its own.

HTML

CSS

The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.

Signals

Datastar signals declared in the selected state's markup. Change a value to update the preview, applied live while Sync is on, or when you click Patch.

Reference#

Slots #

Name	Description
default	An `<input>` or `<neo-textinput>`, paired with optional addons.
`neo-icon`	A direct leading or trailing icon addon.
`span / neo-kbd / neo-kbd-group`	A direct passive text, unit, or shortcut addon.

CSS variables #

Name	Default	Description
`--neo-input-group-addon-padding`	`0 0.6rem`	Inline padding of text and button addons.
`--neo-input-group-addon-bg`	`color-mix(in srgb, var(--page-fg) 4%, transparent)`	Background fill distinguishing addons from the input surface.

Examples#

Currency prefix#

A direct <span> addon gets a muted background while the group keeps one shared outer border. Click the addon and the caret lands in the input.

Hide

HTML

Templ

Username + domain#

Drop a <neo-combobox> in as a trailing addon to let the user pick from a short list of domains. The combobox's trigger adopts the addon background via a small demo-only override.

Hide

HTML

Templ

Range bounds#

Several addons at once, with a <neo-toggle> flipping between min and max on the left and a stack of <neo-select>s on the right (mass unit + rate denominator). The inner input takes the remaining horizontal space.

min max

Hide

HTML

Templ

Comparison#

A <neo-select> of comparison operators sits between 2 number-only <neo-textinput> fields, composing one condition. The operator is a fixed glyph-width column that opens on hover; the operands share the rest.

Hide

HTML

Templ

Search#

A direct <neo-icon> addon is recognized automatically and stays flush with no separator, leaving the icon as a subtle inline mark.

Search with shortcut#

Combine an icon addon with a trailing pair of <neo-kbd> chips inside a text addon.

⌘

Hide

HTML

Templ

Search with submit#

Pair an input with an action button (copy, submit, toggle visibility...). A direct <neo-button> automatically drops its border and radius so it sits flush.

Hide

HTML

Templ

A window menubar. Each <neo-button> opens a <neo-menu> dropdown and the group merges them under one border.

Hide

HTML

Templ

CSS

<div class="demo-toolbar-frame">
  <neo-input-group class="demo-toolbar">
    <neo-button>
      File
      <neo-menu placement="bottom-start">
        <neo-menuitem value="new" shortcut="Mod+N">New file</neo-menuitem>
        <neo-menuitem value="open" shortcut="Mod+O">Open…</neo-menuitem>
        <neo-menuitem value="save" shortcut="Mod+S">Save</neo-menuitem>
        <hr>
        <neo-menuitem value="quit" shortcut="Mod+Q">Quit</neo-menuitem>
      </neo-menu>
    </neo-button>
    <neo-button>
      Edit
      <neo-menu placement="bottom-start">
        <neo-menuitem value="undo" shortcut="Mod+Z">Undo</neo-menuitem>
        <neo-menuitem value="redo" shortcut="Mod+Shift+Z">Redo</neo-menuitem>
        <hr>
        <neo-menuitem value="cut" shortcut="Mod+X">Cut</neo-menuitem>
        <neo-menuitem value="copy" shortcut="Mod+C">Copy</neo-menuitem>
        <neo-menuitem value="paste" shortcut="Mod+V">Paste</neo-menuitem>
      </neo-menu>
    </neo-button>
    <neo-button>
      View
      <neo-menu placement="bottom-start">
        <neo-menuitem value="zoom-in" shortcut="Mod+=">Zoom in</neo-menuitem>
        <neo-menuitem value="zoom-out" shortcut="Mod+-">Zoom out</neo-menuitem>
        <hr>
        <neo-submenu label="Appearance">
          <neo-menuitem value="light">Light</neo-menuitem>
          <neo-menuitem value="dark">Dark</neo-menuitem>
          <neo-menuitem value="system">System</neo-menuitem>
        </neo-submenu>
      </neo-menu>
    </neo-button>
    <neo-button>
      Selection
      <neo-menu placement="bottom-start">
        <neo-menuitem value="select-all" shortcut="Mod+A">Select all</neo-menuitem>
        <neo-menuitem value="expand" shortcut="Mod+Shift+=">Expand selection</neo-menuitem>
        <neo-menuitem value="shrink" shortcut="Mod+Shift+-">Shrink selection</neo-menuitem>
        <hr>
        <neo-menuitem value="copy-up" shortcut="Mod+Alt+Up">Copy line up</neo-menuitem>
        <neo-menuitem value="copy-down" shortcut="Mod+Alt+Down">Copy line down</neo-menuitem>
      </neo-menu>
    </neo-button>
  </neo-input-group>
</div>

package examples

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

templ InputGroupToolbar() {
	<div class="demo-toolbar-frame">
		<neo-input-group class="demo-toolbar">
			<neo-button>
				File
				@neo.Menu(neo.MenuOpts{Placement: neo.Set(neo.PlacementBottomStart)}) {
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("new"), Shortcut: neo.Set("Mod+N")}) {
						New file
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("open"), Shortcut: neo.Set("Mod+O")}) {
						Open…
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("save"), Shortcut: neo.Set("Mod+S")}) {
						Save
					}
					<hr/>
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("quit"), Shortcut: neo.Set("Mod+Q")}) {
						Quit
					}
				}
			</neo-button>
			<neo-button>
				Edit
				@neo.Menu(neo.MenuOpts{Placement: neo.Set(neo.PlacementBottomStart)}) {
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("undo"), Shortcut: neo.Set("Mod+Z")}) {
						Undo
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("redo"), Shortcut: neo.Set("Mod+Shift+Z")}) {
						Redo
					}
					<hr/>
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("cut"), Shortcut: neo.Set("Mod+X")}) {
						Cut
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("copy"), Shortcut: neo.Set("Mod+C")}) {
						Copy
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("paste"), Shortcut: neo.Set("Mod+V")}) {
						Paste
					}
				}
			</neo-button>
			<neo-button>
				View
				@neo.Menu(neo.MenuOpts{Placement: neo.Set(neo.PlacementBottomStart)}) {
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("zoom-in"), Shortcut: neo.Set("Mod+=")}) {
						Zoom in
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("zoom-out"), Shortcut: neo.Set("Mod+-")}) {
						Zoom out
					}
					<hr/>
					@neo.SubMenu(neo.SubMenuOpts{Label: neo.Set("Appearance")}) {
						@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("light")}) {
							Light
						}
						@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("dark")}) {
							Dark
						}
						@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("system")}) {
							System
						}
					}
				}
			</neo-button>
			<neo-button>
				Selection
				@neo.Menu(neo.MenuOpts{Placement: neo.Set(neo.PlacementBottomStart)}) {
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("select-all"), Shortcut: neo.Set("Mod+A")}) {
						Select all
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("expand"), Shortcut: neo.Set("Mod+Shift+=")}) {
						Expand selection
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("shrink"), Shortcut: neo.Set("Mod+Shift+-")}) {
						Shrink selection
					}
					<hr/>
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("copy-up"), Shortcut: neo.Set("Mod+Alt+Up")}) {
						Copy line up
					}
					@neo.MenuItem(neo.MenuItemOpts{Value: neo.Set("copy-down"), Shortcut: neo.Set("Mod+Alt+Down")}) {
						Copy line down
					}
				}
			</neo-button>
		</neo-input-group>
	</div>
}

Disabled#

When the inner input goes disabled, the group mirrors that to its own aria-disabled and the whole assembly fades together.

USD

A wider screen, please

Input group#

Signals

Reference#

Slots #

CSS variables #

Examples#

Currency prefix#

Username + domain#

Range bounds#

Comparison#

Search#

Search with shortcut#

Search with submit#

Disabled#

Settings

Theme

Accessibility

Playgrounds

Server Simulator

Input group#

Signals

Reference#

Slots #

CSS variables #

Examples#

Currency prefix#

Username + domain#

Range bounds#

Comparison#

Search#

Search with shortcut#

Search with submit#

Toolbar#

Disabled#

Theme

Accessibility

Playgrounds

Server Simulator