Usage

import { SearchField } from "@tulipfarm/sprout/search-field";

const [search, setSearch] = useState("");

<SearchField
  id="agent-search"
  label="Find agents"
  placeholder="Search agents"
  maxLength={120}
  value={search}
  onChange={setSearch}
/>

// Placeholder falls back to the label.
<SearchField label="Search models" value={query} onChange={setQuery} />

Props

label names the input for screen readers. It is also the placeholder when you leave out placeholder.value and onChange are required;onChange gets the new string, not an event. Reset paging or cursors in it when the search changes.

maxLength and id pass to the input. Cloud uses 120 for agents, skills, tasks, and actions; 254 for invitations; 255 for tables, projects, files, and rows; 500 for Google Drive; and 640 for chats. className goes on the wrapper, which is full width up to 24rem. Put it in a flex child to size it in a toolbar.

There is one size, 32px tall, and no variants. To disable it, wrap it in a disabled fieldset; the input and clear button both turn off.

Behavior

The clear button shows once there is text. It empties the value and puts focus back in the input. Escape does the same while there is text, and stops there, so a popover or dialog stays open. With no text, Escape passes through and closes them. Clicking the magnifier or padding focuses the input. Inside a form, Enter submits.

The input is a native type="search". The browser's own cancel button is hidden, so there is one clear button in every browser. Autocomplete and spell check are off.

Accessibility

The input is named by label, and the clear button is named "Clear search". The group shows a 2px focus ring when the input has keyboard focus; the clear button has its own ring. Show loading, error, and result counts in a status or alert region next to the field.

The clear button fades in over 120ms. Motion and color transitions stop when reduced motion is requested. In forced colors mode the group keeps a system border and a highlight focus ring.

Theme tokens

The border uses --sprout-input, the fill--sprout-surface, text --sprout-text, and the icon and placeholder --sprout-muted. Focus uses--sprout-focus and disabled --sprout-hover. Radius follows --sprout-radius-control. The opt-in TulipFarm theme tints the focus ring through these tokens.