Fusion UI

Overview

Autocomplete is a text field that suggests matching values while typing. People can pick a suggestion or keep their own text. Pass noResultsLabel (or noResultsComponent for custom content) to tell people when nothing matches.

"use client";

import {Autocomplete} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const AutocompleteExample = () => {
  const [value, setValue] = useState<string | null>("Germany");
  return (
    <Autocomplete
      label={"Countries"}
      value={value}
      values={["Germany", "Austria", "Swiss"]}
      onChange={setValue}
      noResultsLabel={"No entries found"}
    />
  );
};

Many values

The suggestions are searched fuzzily and the list scrolls.

"use client";

import {Autocomplete} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const AutocompleteExampleLong = () => {
  const [value, setValue] = useState<string | null>("Germany");
  return (
    <Autocomplete
      label={"Countries"}
      value={value}
      values={[
        "Afghanistan",
        "Albania",
        "Algeria",
        "Andorra",
        "Angola",
        "Antigua & Deps",
        "Argentina",
        "Armenia",
        "Australia",
        "Austria",
        "Azerbaijan",
        "Bahamas",
        "Bahrain",
        "Bangladesh",
        "Barbados",
        "Belarus",
        "Belgium",
        "Belize",
        "Benin",
        "Bhutan",
        "Bolivia",
        "Bosnia Herzegovina",
        "Botswana",
        "Brazil",
        "Brunei",
        "Bulgaria",
        "Burkina",
        "Burundi",
        "Cambodia",
        "Cameroon",
        "Canada",
        "Cape Verde",
        "Central African Rep",
        "Chad",
        "Chile",
        "China",
        "Colombia",
        "Comoros",
        "Congo",
        "Congo {Democratic Rep}",
        "Costa Rica",
        "Croatia",
        "Cuba",
        "Cyprus",
        "Czech Republic",
        "Denmark",
        "Djibouti",
        "Dominica",
        "Dominican Republic",
        "East Timor",
        "Ecuador",
        "Egypt",
        "El Salvador",
        "Equatorial Guinea",
        "Eritrea",
        "Estonia",
        "Ethiopia",
        "Fiji",
        "Finland",
        "France",
        "Gabon",
        "Gambia",
        "Georgia",
        "Germany",
        "Ghana",
        "Greece",
        "Grenada",
        "Guatemala",
        "Guinea",
        "Guinea-Bissau",
        "Guyana",
        "Haiti",
        "Honduras",
        "Hungary",
        "Iceland",
        "India",
        "Indonesia",
        "Iran",
        "Iraq",
        "Ireland {Republic}",
        "Israel",
        "Italy",
        "Ivory Coast",
        "Jamaica",
        "Japan",
        "Jordan",
        "Kazakhstan",
        "Kenya",
        "Kiribati",
        "Korea North",
        "Korea South",
        "Kosovo",
        "Kuwait",
        "Kyrgyzstan",
        "Laos",
        "Latvia",
        "Lebanon",
        "Lesotho",
        "Liberia",
        "Libya",
        "Liechtenstein",
        "Lithuania",
        "Luxembourg",
        "Macedonia",
        "Madagascar",
        "Malawi",
        "Malaysia",
        "Maldives",
        "Mali",
        "Malta",
        "Marshall Islands",
        "Mauritania",
        "Mauritius",
        "Mexico",
        "Micronesia",
        "Moldova",
        "Monaco",
        "Mongolia",
        "Montenegro",
        "Morocco",
        "Mozambique",
        "Myanmar, {Burma}",
        "Namibia",
        "Nauru",
        "Nepal",
        "Netherlands",
        "New Zealand",
        "Nicaragua",
        "Niger",
        "Nigeria",
        "Norway",
        "Oman",
        "Pakistan",
        "Palau",
        "Panama",
        "Papua New Guinea",
        "Paraguay",
        "Peru",
        "Philippines",
        "Poland",
        "Portugal",
        "Qatar",
        "Romania",
        "Russian Federation",
        "Rwanda",
        "St Kitts & Nevis",
        "St Lucia",
        "Saint Vincent & the Grenadines",
        "Samoa",
        "San Marino",
        "Sao Tome & Principe",
        "Saudi Arabia",
        "Senegal",
        "Serbia",
        "Seychelles",
        "Sierra Leone",
        "Singapore",
        "Slovakia",
        "Slovenia",
        "Solomon Islands",
        "Somalia",
        "South Africa",
        "South Sudan",
        "Spain",
        "Sri Lanka",
        "Sudan",
        "Suriname",
        "Swaziland",
        "Sweden",
        "Switzerland",
        "Syria",
        "Taiwan",
        "Tajikistan",
        "Tanzania",
        "Thailand",
        "Togo",
        "Tonga",
        "Trinidad & Tobago",
        "Tunisia",
        "Turkey",
        "Turkmenistan",
        "Tuvalu",
        "Uganda",
        "Ukraine",
        "United Arab Emirates",
        "United Kingdom",
        "United States",
        "Uruguay",
        "Uzbekistan",
        "Vanuatu",
        "Vatican City",
        "Venezuela",
        "Vietnam",
        "Yemen",
        "Zambia",
        "Zimbabwe",
      ]}
      onChange={setValue}
    />
  );
};

Create a new entry

The footer stays below the suggestions. Here it opens a modal to create the entry that was searched for, without leaving the list first.

"use client";

import {
  Autocomplete,
  Button,
  IconAdd,
  Input,
  Modal,
  ModalActions,
  ModalTitle,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const AutocompleteExampleCreate = () => {
  const [countries, setCountries] = useState(["Germany", "Austria", "Swiss"]);
  const [value, setValue] = useState<string | null>(null);
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");

  const openModal = () => {
    setName(query);
    setOpen(true);
  };

  const close = () => setOpen(false);

  const create = () => {
    const created = name.trim();
    if (!created) return;
    setCountries(current => [...current, created]);
    setValue(created);
    close();
  };

  return (
    <>
      <Autocomplete
        label={"Countries"}
        placeholder={"Search a country"}
        value={value}
        values={countries}
        onChange={setValue}
        onSearch={setQuery}
        searchMode={"filter"}
        noResultsLabel={"No entries found"}
        footer={
          <Button
            buttonStyle={"ghost"}
            color={"neutral"}
            primaryIcon={<IconAdd />}
            onClick={openModal}>
            {query ? `Create “${query}”` : "Create new entry"}
          </Button>
        }
      />
      <Modal
        open={open}
        size={"small"}
        onAbort={close}
        modalTitle={<ModalTitle onAbort={close}>New country</ModalTitle>}
        actions={
          <ModalActions>
            <Button onClick={create} disabled={!name.trim()}>
              Create
            </Button>
            <Button color={"neutral"} onClick={close}>
              Cancel
            </Button>
          </ModalActions>
        }>
        <Input label={"Name"} value={name} onChange={setName} />
      </Modal>
    </>
  );
};