tsx
'use client';
​
import {useState} from 'react';
import {XDSTypeahead} from '@xds/core/Typeahead';
import type {XDSSearchableItem, XDSSearchSource} from '@xds/core/Typeahead';
import {XDSCenter} from '@xds/core/Center';
​
const items: XDSSearchableItem[] = [
  {id: '1', label: 'United States'},
  {id: '2', label: 'United Kingdom'},
  {id: '3', label: 'Canada'},
  {id: '4', label: 'Australia'},
  {id: '5', label: 'Germany'},
  {id: '6', label: 'France'},
  {id: '7', label: 'Japan'},
  {id: '8', label: 'Brazil'},
];
​
const searchSource: XDSSearchSource = {
  search: (query: string) =>
    items.filter(i => i.label.toLowerCase().includes(query.toLowerCase())),
  bootstrap: () => items.slice(0, 5),
};
​
export default function TypeaheadLimitedResults() {
  const [value, setValue] = useState<XDSSearchableItem | null>(null);
  return (
    <XDSCenter width={320}>
      <XDSTypeahead
        label="Country"
        placeholder="Search countries..."
        searchSource={searchSource}
        value={value}
        onChange={setValue}
        hasEntriesOnFocus
        maxMenuItems={3}
      />
    </XDSCenter>
  );
}

tsx
'use client';
​
import {useState} from 'react';
import {XDSTypeahead} from '@xds/core/Typeahead';
import type {XDSSearchableItem, XDSSearchSource} from '@xds/core/Typeahead';
import {XDSCenter} from '@xds/core/Center';
import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
​
const items: XDSSearchableItem[] = [
  {id: '1', label: 'Olivia Martin'},
  {id: '2', label: 'Jackson Lee'},
  {id: '3', label: 'Isabella Nguyen'},
  {id: '4', label: 'William Kim'},
  {id: '5', label: 'Sofia Davis'},
  {id: '6', label: 'Lucas Brown'},
  {id: '7', label: 'Mia Wilson'},
  {id: '8', label: 'Ethan Jones'},
];
​
const searchSource: XDSSearchSource = {
  search: (query: string) =>
    items.filter(i => i.label.toLowerCase().includes(query.toLowerCase())),
  bootstrap: () => items.slice(0, 5),
};
​
export default function TypeaheadSearchField() {
  const [value, setValue] = useState<XDSSearchableItem | null>(null);
  return (
    <XDSCenter width={320}>
      <XDSTypeahead
        label="Team member"
        placeholder="Search people..."
        searchSource={searchSource}
        value={value}
        onChange={setValue}
        startIcon={MagnifyingGlassIcon}
        hasEntriesOnFocus
      />
    </XDSCenter>
  );
}

tsx
'use client';
​
import {useState} from 'react';
import {XDSTypeahead} from '@xds/core/Typeahead';
import type {XDSSearchableItem, XDSSearchSource} from '@xds/core/Typeahead';
import {XDSCenter} from '@xds/core/Center';
​
const items: XDSSearchableItem[] = [
  {id: '1', label: 'Engineering'},
  {id: '2', label: 'Design'},
  {id: '3', label: 'Marketing'},
  {id: '4', label: 'Sales'},
  {id: '5', label: 'Product'},
  {id: '6', label: 'Finance'},
  {id: '7', label: 'Legal'},
  {id: '8', label: 'Operations'},
];
​
const searchSource: XDSSearchSource = {
  search: (query: string) =>
    items.filter(i => i.label.toLowerCase().includes(query.toLowerCase())),
  bootstrap: () => items.slice(0, 5),
};
​
export default function TypeaheadWithHelperText() {
  const [value, setValue] = useState<XDSSearchableItem | null>(null);
  return (
    <XDSCenter width={320}>
      <XDSTypeahead
        label="Department"
        placeholder="Search departments..."
        searchSource={searchSource}
        value={value}
        onChange={setValue}
        description="Select the department this request should be routed to"
      />
    </XDSCenter>
  );
}

tsx
'use client';
​
import {useState} from 'react';
import {XDSTypeahead} from '@xds/core/Typeahead';
import type {XDSSearchableItem, XDSSearchSource} from '@xds/core/Typeahead';
import {XDSCenter} from '@xds/core/Center';
​
const items: XDSSearchableItem[] = [
  {id: '1', label: 'New York'},
  {id: '2', label: 'San Francisco'},
  {id: '3', label: 'London'},
  {id: '4', label: 'Berlin'},
  {id: '5', label: 'Tokyo'},
  {id: '6', label: 'Singapore'},
  {id: '7', label: 'Sydney'},
  {id: '8', label: 'Toronto'},
];
​
const searchSource: XDSSearchSource = {
  search: (query: string) =>
    items.filter(i => i.label.toLowerCase().includes(query.toLowerCase())),
  bootstrap: () => items.slice(0, 5),
};
​
export default function TypeaheadWithValidation() {
  const [value, setValue] = useState<XDSSearchableItem | null>(null);
  return (
    <XDSCenter width={320}>
      <XDSTypeahead
        label="Office"
        placeholder="Search offices..."
        searchSource={searchSource}
        value={value}
        onChange={setValue}
        status={{type: 'error', message: 'Please select an office location'}}
      />
    </XDSCenter>
  );
}