SearchField

A single-line search field.

Search packages

@sdxc/result

A Result type for fallible calls

@sdxc/dates

Plain date and time helpers

@sdxc/highlight

Server-side syntax highlighting

@sdxc/icons

Lucide icons as components

@sdxc/spec

Executable specifications

5 of 5 packages

View code

<div mix={[vstack({ gap: 3, align: "stretch" })]}>
	<SearchField>
		<Label htmlFor="preview-package-search">Search packages</Label>
		<SearchField.Control>
			<SearchField.Input
				id="preview-package-search"
				name="q"
				placeholder="result, dates, icons…"
				mix={[on<HTMLInputElement, "input">("input", readQuery)]}
			/>
			<SearchField.Clear commandfor="preview-package-search" aria-label="Clear the search" />
		</SearchField.Control>
	</SearchField>

	{matches.length === 0 ? (
		<Empty>
			<Empty.Title>No packages match</Empty.Title>
			<Empty.Description>Try a shorter term, or clear the field.</Empty.Description>
		</Empty>
	) : (
		<div mix={[vstack({ gap: 1, align: "stretch" })]}>
			{matches.map((entry) => (
				<Item key={entry.name}>
					<Item.Content>
						<Item.Title>{entry.name}</Item.Title>
						<Item.Description>{entry.summary}</Item.Description>
					</Item.Content>
				</Item>
			))}
		</div>
	)}

	<Text>
		{matches.length} of {packages.length} packages
	</Text>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { SearchField } from "@sdxc/ui";

Renders a <search> landmark — the platform's own role for a search region, needing no explicit role attribute — stacking a caption, SearchField.Input, and validation copy in a single column.

Composition

The parts the component publishes, each a static property of the host.

SearchField
SearchField.InputRenders SearchField's control: a positioning wrapper pairing a muted, decorative SearchIcon with a native <input type="search"> built on Input, inheriting its box, color, and state styling.
SearchField.ControlRenders the row holding SearchField.Input and the SearchField.Clear button beside it, and the positioning context that anchors the clear button to the input's trailing edge.
SearchField.ClearRenders SearchField's clear button: a round, icon-sized ghost Button centred on the input's trailing edge, carrying clearField() so it empties the commandfor input it names and shows while that input holds text.

Examples

<SearchField aria-label={t("search.label")}>
	<SearchField.Input name="q" />
</SearchField>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`children`	`RemixNode`	The field's compound parts: a caption, the control, and any supporting or validation copy.

Also accepts everything in TagProps<"search">.

SearchField.Input

Also accepts everything in Omit<Input.Props, "type" | "list" | "role">.

SearchField.Control

Prop	Type	Description
`children`	`RemixNode`	The row's contents: the search input, and the clear button reading it.

Also accepts everything in TagProps<"div">.

SearchField.Clear

Prop	Type	Description
`commandfor`	`string`	The `id` of the input this button empties, naming the control it belongs to.
`children?`	`RemixNode`	Glyph or label the button shows. Defaults to a decorative XIcon.

Also accepts everything in Omit< Button.Props, "type" | "variant" | "size" | "command" | "children" >.