components

AutoComplete (code)

AutoCompletes are input fields where a user is suggested several options, based on the input they provide.

Selected value:

import { AutoComplete } from '@mediahuis/chameleon-react'

() => {
  const [selectedValue, setSelectedValue] = React.useState('');

  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="main"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="main"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

Props

Name	Type	Default	Required	Description
accessibilityLabelClearButton	String	'clear selection'	-	Accessible friendly label in clear button. Will not be shown.
action	Node	-	-	Contents displayed within the ActionLabel.
autoComplete	String	'off'	-	Modifies the html autocomplete attribute.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	Whether or not the TextField is disabled
error	Boolean	-	-	Visually displayed as error. Will add the necessary a11y tags.
forceSelection	Boolean	-	-	Force the user to make a selection.
iconLeft	FunctionStringNodeObject	-	-	The left icon of the TextField
id	String	-	true	The id of the TextField (a11y), will also add an id to the wrapper with prefix 'autocomplete-'
label	String	-	true	The label used in the TextField
labelHidden	Boolean	-	-	Visibly hide the label. (label is still required for a11y)
loading	Boolean	-	-	The loading state of the autoComplete: use in combination with async data.
message	String	-	-	The message used beneath the textField
name	String	-	-	Name of the TextField.
onBlur	Function	-	-	The onBlur event of the TextField: called when the input loses focus, e.g. when user presses Tab
onChange	Function	-	true	signature: function onChange(value, stateHelpers)
onFocus	Function	-	-	Fires when the TextField receives focus.
onInputChange	Function	-	-	AutoComplete will call this function every time you need to update suggestions. Can be used for async.
onSelect	Function	-	-	Called when the user selects an item, regardless of the previous selected item. Called with the item that was selected and the new state of downshift. (see onStateChange for more info on stateAndHelpers).
optionalLabel	String	-	-	Contents displayed within the OptionalLabel.
placeholder	String	-	-	The placeholder used in the TextField
placement	'bottom''top'	'bottom'	-	Where are the suggestions positioned towards the TextField element.
readOnly	Boolean	-	-	TextField is readOnly or not.
success	Boolean	-	-	Autocomplete is successfully filled in.
suggestions	Array<String>	-	true	An array of suggestions
type	String	'text'	-	The type of the TextField
value	String	-	-	Native input value.

System Props

m, mb, ml, mr, mt, mx, my

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

ForceSelection

Make sure a user selects one of the selections

Selected value:

() => {
  const [selectedValue, setSelectedValue] = React.useState('');

  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="onChange"
        label="Your favorite number"
        forceSelection
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="onChange"
        label="Your favorite number"
        forceSelection
      />
    </>
  );
};

Suggestions

default: []

suggestions is a list of strings that may be suggested to the user, based on their input.

() => {
  const [selectedValue, setSelectedValue] = React.useState('');

  return (
    <>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="suggestions"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  return (
    <>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="suggestions"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

OnChange

default: undefined

onChange is triggered on every change made by the user, so when the user types or when user selectes a suggested value, either by keyboard or mouse.

Selected value:

() => {
  const [selectedValue, setSelectedValue] = React.useState('');

  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="onChange"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        id="onChange"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

OnInputChange

default: undefined

In contrast to onChange, onInputChange is only triggered when the user types in the input field. The reason this is separated, is to reduce potential API calls when the suggestions are fetched from an API (e.g. streets in an addressform).

Note: when you supply the onInputChange property, the component will no longer automagically filter suggestions on typing. We assume that, since you're using the value of the input yourself, you will provide the updated suggestions to the suggestions prop.

Selected value:

Search term for API:

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  const [searchTerm, setSearchTerm] = React.useState('');
  const [suggestions, setSuggestions] = React.useState([]);

  const fakeApiCall = term => {
    const newSuggestions = ['One', 'Two', 'Three'].filter(term =>
      term.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSuggestions(newSuggestions);
  };

  React.useEffect(() => {
    fakeApiCall(searchTerm);
  }, [searchTerm]);

  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <Paragraph>Search term for API: {searchTerm}</Paragraph>
      <AutoComplete
        suggestions={suggestions}
        onChange={setSelectedValue}
        onInputChange={setSearchTerm}
        id="onInputChange"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  const [searchTerm, setSearchTerm] = React.useState('');
  const [suggestions, setSuggestions] = React.useState([]);
  const fakeApiCall = term => {
    const newSuggestions = ['One', 'Two', 'Three'].filter(term =>
      term.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSuggestions(newSuggestions);
  };
  React.useEffect(() => {
    fakeApiCall(searchTerm);
  }, [searchTerm]);
  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <Paragraph>Search term for API: {searchTerm}</Paragraph>
      <AutoComplete
        suggestions={suggestions}
        onChange={setSelectedValue}
        onInputChange={setSearchTerm}
        id="onInputChange"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

Loading

default: false

To indicate to a user that, based on their input an API call is being called, you can set the loading prop to true.

Selected value:

Search term for API:

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  const [searchTerm, setSearchTerm] = React.useState('');
  const [suggestions, setSuggestions] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);

  const fakeApiCall = term => {
    setIsLoading(true);
    setTimeout(() => {
      const newSuggestions = ['One', 'Two', 'Three'].filter(term =>
        term.toLowerCase().includes(searchTerm.toLowerCase())
      );
      setSuggestions(newSuggestions);
      setIsLoading(false);
    }, 500);
  };

  React.useEffect(() => {
    fakeApiCall(searchTerm);
  }, [searchTerm]);

  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <Paragraph>Search term for API: {searchTerm}</Paragraph>
      <AutoComplete
        suggestions={suggestions}
        onChange={setSelectedValue}
        onInputChange={setSearchTerm}
        loading={isLoading}
        id="loading"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  const [searchTerm, setSearchTerm] = React.useState('');
  const [suggestions, setSuggestions] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);
  const fakeApiCall = term => {
    setIsLoading(true);
    setTimeout(() => {
      const newSuggestions = ['One', 'Two', 'Three'].filter(term =>
        term.toLowerCase().includes(searchTerm.toLowerCase())
      );
      setSuggestions(newSuggestions);
      setIsLoading(false);
    }, 500);
  };
  React.useEffect(() => {
    fakeApiCall(searchTerm);
  }, [searchTerm]);
  return (
    <>
      <Paragraph>Selected value: {selectedValue}</Paragraph>
      <Paragraph>Search term for API: {searchTerm}</Paragraph>
      <AutoComplete
        suggestions={suggestions}
        onChange={setSelectedValue}
        onInputChange={setSearchTerm}
        loading={isLoading}
        id="loading"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

IconLeft

default: undefined

For further illustration purposes, you can provide an iconLeft.

() => {
  const [selectedValue, setSelectedValue] = React.useState('');

  return (
    <>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        iconLeft={Search}
        id="iconLeft"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  return (
    <>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        iconLeft={Search}
        id="iconLeft"
        label="Your favorite number"
        value={selectedValue}
      />
    </>
  );
};

Label Props

As with other input elements, AutoComplete also has a wide range of extra properties to convey even more meaning.

We need your data

() => {
  const [selectedValue, setSelectedValue] = React.useState('');

  return (
    <>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        label="What's your address?"
        action={<LinkText>Where can I find it?</LinkText>}
        message="We need your data"
        optionalLabel="Optional"
        id="labelProps"
        value={selectedValue}
      />
    </>
  );
};

() => {
  const [selectedValue, setSelectedValue] = React.useState('');
  return (
    <>
      <AutoComplete
        suggestions={['One', 'Two', 'Three']}
        onChange={setSelectedValue}
        label="What's your address?"
        action={<LinkText>Where can I find it?</LinkText>}
        message="We need your data"
        optionalLabel="Optional"
        id="labelProps"
        value={selectedValue}
      />
    </>
  );
};