## Feature Examples
### Status
- description: Control the component status using a `status` prop. It supports 2 states:
- `error` - use it to highlight an invalid search keyword that has no matching results
- `warning` - use it to highlight value that impacts the user or can’t be validated
- example:
```jsx
() => {
const options = [
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
];
return (
);
};
```
### Status Message
- description: Explain the status with `statusMessage` prop.
It only works when `status` is set to `error`.
- example:
```jsx
```
### Disabled
- description: Disable all input interactions with `disabled` prop. Use it to highlight unavailable functions.
- example:
```jsx
;
```
### Suffix
- description: Explain the field value with additional information added to the `suffix` area.
This prop accepts text, icons and even buttons.
- example:
```jsx
Suffix]}
label="my autocomplete"
options={[
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
]}
/>;
```
### List item builders
- description: Build custom layouts with:
- `listItemSectionBuilder` - use it to group list items into sections by type. See ListItemSection for more details.
- `listItemActionBuilder` - use it to add text buttons for related list actions, e.g., ‘Manage categories’. See ListItemAction for more details.
- `listItemSelectBuilder` - use it to build custom list designs. See ListItemSelect for more details.
- example:
```jsx
() => {
const listItemSectionOptions = [
listItemSectionBuilder({
id: 0,
type: 'title',
title: 'Group Title',
}),
{ id: 1, value: 'Option 1' },
{ id: 2, value: 'Option 2' },
{ id: 3, value: 'Option 3' },
listItemSectionBuilder({
id: 3,
type: 'divider',
}),
{ id: 4, value: 'Option 4' },
];
const listItemActionOptions = [
listItemActionBuilder({
id: 0,
title: 'Action',
}),
{ id: 1, value: 'Option 1' },
{ id: 2, value: 'Option 2' },
{ id: 3, value: 'Option 3' },
];
const listItemSelectOptions = [
listItemSelectBuilder({
id: 0,
prefix: ,
title: 'Title',
subtitle: 'Subtitle',
suffix: 'Suffix',
}),
listItemSelectBuilder({
id: 1,
prefix: ,
title: 'Title',
subtitle: 'Subtitle',
suffix: 'Suffix',
}),
listItemSelectBuilder({
id: 2,
prefix: ,
title: 'Title',
subtitle: 'Subtitle',
suffix: 'Suffix',
}),
];
return (
);
};
```
### List container height
- description: Control container size with `maxHeightPixels` prop. Use it to restrict the height of longer lists of options.
- example:
```jsx
() => {
const options = [
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
{ id: 3, value: 'Option 4' },
{ id: 4, value: 'Option 5' },
{ id: 5, value: 'Option 6' },
{ id: 0, value: 'Option 7' },
{ id: 1, value: 'Option 8' },
{ id: 2, value: 'Option 9' },
{ id: 3, value: 'Option 10' },
{ id: 4, value: 'Option 11' },
{ id: 5, value: 'Option 12' },
];
return (
);
};
```
## Common Use Case Examples
### Checkout Form
- description: The autocomplete selection only be used in a Premium Checkout form.
- example:
```jsx
() => {
const countries = [
{ id: 0, value: 'Australia' },
{ id: 1, value: 'Austria' },
{ id: 2, value: 'Guinea-Bissau' },
{ id: 3, value: 'Mauritania' },
{ id: 4, value: 'Mauritius' },
{ id: 5, value: 'Nauru' },
];
return (
,
]}
/>
|
|
|
|
|
);
};
```