Suggest Input

A text field with a list of suggestions that narrows as you type. Suggestions that start with your text come first, and the part that matched is bold. On the web the arrow keys move through the list, Enter chooses and Escape closes it; on a phone you tap a suggestion. It is a combobox to screen readers, with the highlighted option announced as you move. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add suggest-input

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/suggest-input.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { SuggestInput } from "@/components/ui/suggest-input";

const cities = ["Lisbon", "Lima", "Lyon", "Kyoto"];

export default function Example() {
  const [text, setText] = useState("");

  return (
    <SuggestInput
      label="City"
      value={text}
      onChangeText={setText}
      suggestions={cities}
      onSelect={setText}
    />
  );
}

The suggestion list opens over whatever sits below the field, so leave room for it.

Props