Search field
A labeled native search input with focus-preserving clear and an optional explicit submit action.
- Comparison revealDisplays
- Elastic segmentInputs
- Activity streamFeedback
- Pixel reveal cardMotion
No search submitted yet.
Implementation
1"use client";2 3import { useId, useRef, useState, type InputHTMLAttributes } from "react";4import { Search, X } from "lucide-react";5 6export type SearchFieldProps = Omit<7 InputHTMLAttributes<HTMLInputElement>,8 "type" | "value" | "defaultValue" | "onChange" | "children"9> & {10 label: string;11 description?: string;12 error?: string;13 value?: string;14 defaultValue?: string;15 onChange?: (value: string) => void;16 onSearch?: (value: string) => void;17};18 19/** A labelled native search input that composes inside the consumer's form. */20export function SearchField({21 label,22 description,23 error,24 value,25 defaultValue = "",26 onChange,27 onSearch,28 disabled = false,