Forms

Search field

Search input with an icon, a clear button and a debounced search callback.

import { SearchField } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Debounced search

Search jobs

Type to search; results update when you pause.

Show code

search-field/basic.tsx

'use client';

import { Field, SearchField, Stack, Text } from '@jsonresume/ui';
import { useState } from 'react';
import * as styles from './basic.css';

export default function SearchFieldBasic() {
  const [query, setQuery] = useState('');
  return (
    <Stack gap={3} className={styles.root}>
      <Field label="Search jobs">
        <SearchField
          placeholder="Title, company or skill"
          onSearch={setQuery}
        />
      </Field>
      <Text size="xs" tone="muted" aria-live="polite">
        {query
          ? `Searching for “${query}”`
          : 'Type to search; results update when you pause.'}
      </Text>
    </Stack>
  );
}

search-field/basic.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 28rem)' });

Large

search-field/large.tsx

import { SearchField } from '@jsonresume/ui';

// The large size matches the docs search on jsonresume.org.
export default function SearchFieldLarge() {
  return (
    <SearchField
      size="lg"
      aria-label="Search the documentation"
      placeholder="Search the documentation"
    />
  );
}

Accessibility

A real search input (role searchbox); label it with Field or aria-label.
Escape clears; the clear button is labelled.

Props

Also accepts the attributes of the element SearchField renders.
Prop	Type	Default	Description
clearLabel	string	Clear search
debounceMs	number	250
defaultValue	string
onSearch	((value: string) => void)	–	Debounced: fires once typing pauses, and immediately on clear or Enter.
onValueChange	((value: string) => void)	–	Every keystroke.
size	mdlg	md
value	string	–