Develop ultra fast with Prismane 🎉
Logo
Quick Search...

AutocompleteField

AutocompleteField displays a field that has a set of options, which can be filtered.
Category: Inputs Source

Import

 
import { AutocompleteField } from "@prismane/core";

Usage

 
function Demo() {
  const [value, setValue] = useState("");

  return (
    <AutocompleteField
      placeholder="Choose a name"
      label="Name:"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      options={[
        { value: "liam", element: "Liam" },
        { value: "olivia", element: "Olivia" },
        { value: "noah", element: "Noah" },
        { value: "emma", element: "Emma" },
        { value: "ava", element: "Ava" },
        { value: "isabella", element: "Isabella" },
        { value: "sophia", element: "Sophia" },
        { value: "michael", element: "Michael" },
        { value: "william", element: "William" },
        { value: "james", element: "James" },
        { value: "benjamin", element: "Benjamin" },
        { value: "elijah", element: "Elijah" },
        { value: "lucas", element: "Lucas" },
        { value: "alexander", element: "Alexander" },
        { value: "oliver", element: "Oliver" },
        { value: "ethan", element: "Ethan" },
        { value: "david", element: "David" },
        { value: "jackson", element: "Jackson" },
        { value: "mason", element: "Mason" },
        { value: "sebastian", element: "Sebastian" },
      ]}
    />
  );
}

With Icon

 
function Demo() {
  const [value, setValue] = useState("");

  return (
    <AutocompleteField
      placeholder="Choose an account type"
      label="Account type:"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      icon={<User />}
      options={[
        { value: "personal", element: "Personal" },
        { value: "creator", element: "Creator" },
        { value: "business", element: "Business" },
      ]}
    />
  );
}

Custom Filter Function

By providing a value to the filter prop, you can change the filtering method that the given field uses.

function Demo() {
  const [value, setValue] = useState("");

  return (
    <AutocompleteField
      placeholder="Enter some text to filter"
      label="Choose a name:"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      options={[
        { value: "liam", element: "Liam" },
        { value: "olivia", element: "Olivia" },
        { value: "noah", element: "Noah" },
        { value: "emma", element: "Emma" },
        { value: "ava", element: "Ava" },
        { value: "isabella", element: "Isabella" },
        { value: "sophia", element: "Sophia" },
        { value: "michael", element: "Michael" },
        { value: "william", element: "William" },
        { value: "james", element: "James" },
        { value: "benjamin", element: "Benjamin" },
        { value: "elijah", element: "Elijah" },
        { value: "lucas", element: "Lucas" },
        { value: "alexander", element: "Alexander" },
        { value: "oliver", element: "Oliver" },
        { value: "ethan", element: "Ethan" },
        { value: "david", element: "David" },
        { value: "jackson", element: "Jackson" },
        { value: "mason", element: "Mason" },
        { value: "sebastian", element: "Sebastian" },
      ]}
      filter={(value, item) => item.value.includes(value)}
    />
  );
}

AutocompleteField Variants

 
function Demo() {
  const [value, setValue] = useState("");

  return (
    <>
      <AutocompleteField
        variant="outlined"
        placeholder="Outlined Field"
        label="Outlined Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "liam", element: "Liam" },
          { value: "olivia", element: "Olivia" },
          { value: "noah", element: "Noah" },
          { value: "emma", element: "Emma" },
          { value: "ava", element: "Ava" },
          { value: "isabella", element: "Isabella" },
          { value: "sophia", element: "Sophia" },
          { value: "michael", element: "Michael" },
          { value: "william", element: "William" },
          { value: "james", element: "James" },
          { value: "benjamin", element: "Benjamin" },
          { value: "elijah", element: "Elijah" },
          { value: "lucas", element: "Lucas" },
          { value: "alexander", element: "Alexander" },
          { value: "oliver", element: "Oliver" },
          { value: "ethan", element: "Ethan" },
          { value: "david", element: "David" },
          { value: "jackson", element: "Jackson" },
          { value: "mason", element: "Mason" },
          { value: "sebastian", element: "Sebastian" },
        ]}
      />
      <AutocompleteField
        variant="filled"
        placeholder="Filled Field"
        label="Filled Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "liam", element: "Liam" },
          { value: "olivia", element: "Olivia" },
          { value: "noah", element: "Noah" },
          { value: "emma", element: "Emma" },
          { value: "ava", element: "Ava" },
          { value: "isabella", element: "Isabella" },
          { value: "sophia", element: "Sophia" },
          { value: "michael", element: "Michael" },
          { value: "william", element: "William" },
          { value: "james", element: "James" },
          { value: "benjamin", element: "Benjamin" },
          { value: "elijah", element: "Elijah" },
          { value: "lucas", element: "Lucas" },
          { value: "alexander", element: "Alexander" },
          { value: "oliver", element: "Oliver" },
          { value: "ethan", element: "Ethan" },
          { value: "david", element: "David" },
          { value: "jackson", element: "Jackson" },
          { value: "mason", element: "Mason" },
          { value: "sebastian", element: "Sebastian" },
        ]}
      />
      <AutocompleteField
        variant="underlined"
        placeholder="Underlined Field"
        label="Underlined Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "liam", element: "Liam" },
          { value: "olivia", element: "Olivia" },
          { value: "noah", element: "Noah" },
          { value: "emma", element: "Emma" },
          { value: "ava", element: "Ava" },
          { value: "isabella", element: "Isabella" },
          { value: "sophia", element: "Sophia" },
          { value: "michael", element: "Michael" },
          { value: "william", element: "William" },
          { value: "james", element: "James" },
          { value: "benjamin", element: "Benjamin" },
          { value: "elijah", element: "Elijah" },
          { value: "lucas", element: "Lucas" },
          { value: "alexander", element: "Alexander" },
          { value: "oliver", element: "Oliver" },
          { value: "ethan", element: "Ethan" },
          { value: "david", element: "David" },
          { value: "jackson", element: "Jackson" },
          { value: "mason", element: "Mason" },
          { value: "sebastian", element: "Sebastian" },
        ]}
      />
      <AutocompleteField
        variant="unstyled"
        placeholder="Unstyled Field"
        label="Unstyled Field:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "liam", element: "Liam" },
          { value: "olivia", element: "Olivia" },
          { value: "noah", element: "Noah" },
          { value: "emma", element: "Emma" },
          { value: "ava", element: "Ava" },
          { value: "isabella", element: "Isabella" },
          { value: "sophia", element: "Sophia" },
          { value: "michael", element: "Michael" },
          { value: "william", element: "William" },
          { value: "james", element: "James" },
          { value: "benjamin", element: "Benjamin" },
          { value: "elijah", element: "Elijah" },
          { value: "lucas", element: "Lucas" },
          { value: "alexander", element: "Alexander" },
          { value: "oliver", element: "Oliver" },
          { value: "ethan", element: "Ethan" },
          { value: "david", element: "David" },
          { value: "jackson", element: "Jackson" },
          { value: "mason", element: "Mason" },
          { value: "sebastian", element: "Sebastian" },
        ]}
      />
    </>
  );
}

AutocompleteField Sizes

 
function Demo() {
  const [value, setValue] = useState("");

  return (
    <Flex direction="column" gap={fr(2)}>
      <AutocompleteField
        size="xs"
        placeholder="xs Size"
        label="xs Size:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "ivan", element: "Ivan" },
          { value: "gosho", element: "Gosho" },
          { value: "petkan", element: "Petkan" },
        ]}
      />
      <AutocompleteField
        size="sm"
        placeholder="sm Size"
        label="sm Size:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "ivan", element: "Ivan" },
          { value: "gosho", element: "Gosho" },
          { value: "petkan", element: "Petkan" },
        ]}
      />
      <AutocompleteField
        size="base"
        placeholder="base Size"
        label="base Size:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "ivan", element: "Ivan" },
          { value: "gosho", element: "Gosho" },
          { value: "petkan", element: "Petkan" },
        ]}
      />
      <AutocompleteField
        size="md"
        placeholder="md Size"
        label="md Size:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "ivan", element: "Ivan" },
          { value: "gosho", element: "Gosho" },
          { value: "petkan", element: "Petkan" },
        ]}
      />
      <AutocompleteField
        size="lg"
        placeholder="lg Size"
        label="lg Size:"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        options={[
          { value: "ivan", element: "Ivan" },
          { value: "gosho", element: "Gosho" },
          { value: "petkan", element: "Petkan" },
        ]}
      />
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackAspectRatio
Up NextAvatar