# Searchable list

A filter input above a list that is always visible, for picking one item from many without a popup. It's a composition of [SearchableDropdown](/components/dropdown.md#searchable) parts, not a separate component.

```tsx
// demo.tsx
import {Field, SearchableDropdown} from '@earendil-works/elanor-react';
import {useId, useState} from 'react';

const projects = ['Website redesign', 'Design system', 'Release notes', 'Help center'];

export default function SearchableListDemo() {
  const inputId = useId();
  const [project, setProject] = useState<string | null>(null);

  return (
    <Field.Root>
      <SearchableDropdown.Root
        inline
        open
        items={projects}
        value={project}
        onValueChange={setProject}
      >
        <Field.Label htmlFor={inputId}>Project</Field.Label>
        <SearchableDropdown.InputGroup>
          <SearchableDropdown.Input id={inputId} placeholder="Filter projects" />
        </SearchableDropdown.InputGroup>
        <SearchableDropdown.Empty>No projects found.</SearchableDropdown.Empty>
        <SearchableDropdown.List aria-label="Projects">
          {(item: string) => (
            <SearchableDropdown.Item key={item} value={item}>
              <SearchableDropdown.ItemIndicator />
              {item}
            </SearchableDropdown.Item>
          )}
        </SearchableDropdown.List>
        <SearchableDropdown.Status>
          {project === null ? null : `Selected ${project}.`}
        </SearchableDropdown.Status>
      </SearchableDropdown.Root>
    </Field.Root>
  );
}
```

## Usage

`inline` and `open` on `SearchableDropdown.Root` render the list in place instead of in a popup. Leave out Trigger, Portal, Positioner, and Popup.

```tsx
<SearchableDropdown.Root inline open items={projects}>
  <SearchableDropdown.InputGroup>
    <SearchableDropdown.Input />
  </SearchableDropdown.InputGroup>
  <SearchableDropdown.Empty />
  <SearchableDropdown.List>
    {(item) => <SearchableDropdown.Item value={item} />}
  </SearchableDropdown.List>
  <SearchableDropdown.Status />
</SearchableDropdown.Root>
```

See the [Dropdown API](/components/dropdown.md#api) for the parts.