Autocomplete

Name: Nayan UI
Author: Nayan UI

An Autocomplete component is a UI element that combines a text input with a dropdown list of suggestions, allowing users to quickly find and select from a set of options. It provides real-time filtering as users type, enhancing the search and selection experience.

Demo

Select a framework...

Selected: None

Usage

import { useState } from 'react';
import { NAutocomplete } from '@nayan-ui/react';

const items = [
  { id: 'react', label: 'React' },
  { id: 'vue', label: 'Vue' },
  { id: 'angular', label: 'Angular' },
  { id: 'svelte', label: 'Svelte' }
];

const Autocomplete = () => {
  const [selected, setSelected] = useState(null);

  return (
    <NAutocomplete
      items={items}
      placeholder="Select a framework..."
      selectedKey={selected}
      onSelectionChange={setSelected}
    />
  );
};

export default Autocomplete;

Attributes

Name	Type	Default	Details
items	NAutocompleteItem[]	Required	List of items with id and label.
placeholder	string	'Search...'	Placeholder text.
selectedKey	string	Optional	Currently selected item key.
onSelectionChange	(key: string \| null) => void	Optional	Callback when selection changes.
onClear	() => void	Optional	Callback when input is cleared.
variant	'primary' \| 'secondary'	'primary'	Visual variant.
isDisabled	boolean	false	Disables the autocomplete.
isInvalid	boolean	false	Marks as invalid.
fullWidth	boolean	false	Full width mode.
className	string	' '	Additional CSS classes.

Autocomplete

Demo

Usage

Attributes

Tags