II · Components / 09
Inputs and selection
Every part the site is built from, live, in both themes.
Inputs and selection#
Labels above, help below, errors in words next to the field that caused them. Every control works from the keyboard and says what it is.
Use
One column, labels on top, the hint where the eye goes next. Validate when someone leaves a field, not while they type.
Avoid
Placeholder text as the only label; red borders without words.
Use
Segmented for two to four views of the same thing; chips for filters you can stack; sliders for ranges; a switch for a setting that applies at once.
Use
One search for the whole site, reachable from anywhere with ⌘K, Ctrl+K or /. Escape clears; Enter goes.
Implementation contract
Use it in the product
Take labelled values without making the reader infer units, scope or errors.
- Exports
- SearchField, Segmented, Switch, Chip, Stepper, Slider, RangeSlider
- Source
src/components/waypoint/ui/interactive.tsx- Props and defaults
- SearchField requires value, onChange and label; shape defaults to pill. Segmented requires label, options, value and onChange. Slider requires value, onChange, min, max and label; step defaults to 1.
- HTML and keyboard
- SearchField uses a labelled search input. Segmented is a radio group. Sliders remain native range inputs; pair exact values with a numeric input when precision matters.
- States and themes
- Default, focus, checked/selected, invalid with adjacent words, disabled with reason, loading and done. Both themes use the same geometry.
- Data and provenance
- Filter drafts stay local until applied on phone. Only applied values belong in a shareable address. The current gear catalog is build 1.60.1.70245.
Example usage
"use client";
import { useState } from "react";
import { SearchField } from "@/components/waypoint/ui/interactive";
export function ItemSearch() {
const [query, setQuery] = useState("");
return <SearchField label="Find an item" value={query} onChange={setQuery} />;
}