AutoSuggest

The AutoSuggest component provides an accessible and customizable autocomplete experience, similar to MUI's Autocomplete but built from scratch for complete styling and behavioral control.

Demo

Select a fruit

• Apple
• Banana
• Cherry
• Date
• Grape

Selected: None

---

Usage

TypeScript

import React, { useState } from "react";
import { AutoSuggest } from "@libdev-ui/base";

export default function AutoSuggestDemo() {
  const [value, setValue] = useState<string>("");

  const options = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
    { label: "Date", value: "date" },
    { label: "Grape", value: "grape" },
  ];

  return (
    <div style={{ maxWidth: 400, margin: "2rem auto" }}>
      <h3 style={{ marginBottom: "1rem" }}>Select a fruit</h3>
      <AutoSuggest
        options={options}
        value={value}
        onChange={setValue}
        placeholder="Start typing..."
      />
      <div style={{ marginTop: "2rem", fontSize: "1.1rem" }}>
        Selected: <strong>{value || <span>None</span>}</strong>
      </div>
    </div>
  );
}

JavaScript

import React, { useState } from "react";
import { AutoSuggest } from "@libdev-ui/base";

export default function AutoSuggestDemo() {
  const [value, setValue] = useState("");

  const options = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
    { label: "Date", value: "date" },
    { label: "Grape", value: "grape" },
  ];

  return (
    <div style={{ maxWidth: 400, margin: "2rem auto" }}>
      <h3 style={{ marginBottom: "1rem" }}>Select a fruit</h3>
      <AutoSuggest
        options={options}
        value={value}
        onChange={setValue}
        placeholder="Start typing..."
      />
      <div style={{ marginTop: "2rem", fontSize: "1.1rem" }}>
        Selected: <strong>{value || <span>None</span>}</strong>
      </div>
    </div>
  );
}

Example

<AutoSuggest
  options={genreOptions}
  value={selectedGenre}
  onChange={(newValue) => setSelectedGenre(newValue)}
  getOptionLabel={(option) => option.label}
  placeholder="Select genre"
/>

Props

Name	Type	Default	Description
options	{ label: string; value: string }[]	Required	The list of options to choose from.
value	{ label: string; value: string } | null	null	Currently selected option.
onChange	(value: { label: string; value: string } | null) => void	Required	Called when an option is selected or cleared.
getOptionLabel	(option: { label: string; value: string }) => string	(o) => o.label	Function to extract label from each option.
placeholder	string	""	Placeholder text for the input.
disabled	boolean	false	If true, disables the input.
readOnly	boolean	false	If true, prevents editing and only allows reading the selected value.
size	'sm' | 'md' | 'lg'	'md'	Controls input height and font size.
blurOnSelect	boolean	true	If true, the popup closes and input loses focus after selection.
clearOnEscape	boolean	true	If true, hitting Escape will clear the selected value.
includeInputInList	boolean	true	Whether to include the input text itself in the filter list.
autoSelect	boolean	false	If true, the first matching item is auto-selected.
selectOnFocus	boolean	true	If true, input text is auto-selected on focus.
showClearButton	boolean	true	Whether to show a ✕ button to clear the current selection.
disableListWrap	boolean	false	If true, disables wrapping around options with arrow keys.

Styling

You can customize the look using:

• size — Controls the size of the input (sm, md, lg)
• sl={{}} — (Soon) Support for system props like color, margin, etc. via sl prop (planned)

Accessibility

• Fully keyboard accessible (Arrow keys, Enter, Escape)
• Screen reader friendly with aria roles.

Future

• Multiple selection
• Tag-based chips
• Custom option rendering
• Grouped options support

Related hook

See useInputBase for the centralized behavior and ARIA details.