AutoComplete: React
AutoCompletes are input fields where a user is suggested several options, based on the input they provide.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { AutoComplete } from '@mediahuis/chameleon-react';
export default function Example() {
return <AutoComplete suggestions={['One', 'Two', 'Three']} />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
accessibilityLabelClearButton | String | 'clear selection' | No | Is used to set an accessibility friendly label for the clear button, allowing screen readers to read it aloud. This label will not be visually shown. |
action | ReactNode | - | No | The contents displayed within the ActionLabel. |
autoComplete | String | 'off' | No | Modifies the HTML `autocomplete` attribute. |
className | String | - | No | Extend the CSS class names of the component. |
disabled | Boolean | - | No | Indicates whether the input is disabled or not. |
error | Boolean | - | No | Determines whether the component should be visually displayed with an error state. When set to `true`, the necessary accessibility tags and styles for error state will be added. |
forceSelection | Boolean | - | No | Forces the user to make a selection. |
iconLeft | SVGType | - | No | The left icon of the input. |
id | String | - | Yes | The ID of the input for accessibility purposes. Additionally, an ID will be added to the wrapper element with the prefix 'autocomplete-'. |
label | String | - | Yes | The label used in the input. |
labelHidden | Boolean | - | No | Determines whether the label should be visually hidden, while still being required for accessibility purposes. |
loading | Boolean | - | No | The loading state of the AutoComplete component. It is typically used in combination with async data fetching. |
markMatches | Boolean | true | No | Marks the matched query in suggestions |
message | String | - | No | The message used beneath the input. |
name | String | - | No | The name of the input. |
onBlur | FocusEventHandler | - | No | This event is triggered when the input loses focus, such as when the user presses the Tab key. |
onChange | Function | - | Yes | Event is triggered when the value of the input changes. |
onFocus | FocusEventHandler | - | No | This event is triggered when the input receives focus. |
onInputChange | Function | - | No | This event is triggered by the AutoComplete component every time suggestions need to be updated. It can be used for async operations. |
onSelect | Function | - | No | This event is triggered when the user selects an item, regardless of the previously selected item. It is called with the selected item and the new state of downshift. |
optionalLabel | String | - | No | The contents displayed within the OptionalLabel. |
placeholder | String | - | No | The placeholder text used in the input. |
placement | 'bottom' | 'top' | 'bottom' | No | Determines the position of the suggestions relative to the input element. |
readOnly | Boolean | - | No | Indicates whether the input is in a read-only state. |
success | Boolean | - | No | Indicates whether the AutoComplete has been successfully filled in. |
suggestions | Unknown | - | Yes | An array of suggestions for the AutoComplete component. |
type | String | 'text' | No | The type of the input. |
value | String | - | No | The current value of the native input element. |
defaultValue | String | - | No | The current value of the native input element. |
required
Chameleon form inputs are required by default, with the required attribute automatically set. To mark a field as optional, pass the optionalLabel prop to remove the required attribute.