@wix/design-system/dist/docs/components/AutoCompleteWithLabelExamples.md

@wix/design-system

## Feature Examples


### Status
- description: Control the component status using a `status` prop. It supports 2 states:<br/>
        &emsp;- `error` - use it to highlight an invalid search keyword that has no matching results<br/>
        &emsp;- `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 (
    <StorybookComponents.Stack flexDirection="column">
      <AutoCompleteWithLabel label="Error" status="error" options={options} />
      <AutoCompleteWithLabel
        label="Warning"
        status="warning"
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
```

### Status Message
- description: Explain the status with `statusMessage` prop.<br/>
        <br/>
        It only works when `status` is set to `error`.
- example: 
```jsx 
<AutoCompleteWithLabel
    label="Error"
    options={[
      { id: 0, value: 'Option 1' },
      { id: 1, value: 'Option 2' },
      { id: 2, value: 'Option 3' },
    ]}
    status="error"
    statusMessage="Message that explains the status"
  />
```

### Disabled
- description: Disable all input interactions with `disabled` prop. Use it to highlight unavailable functions.
- example: 
```jsx 
<AutoCompleteWithLabel label="Disabled" disabled />;
```

### Suffix
- description: Explain the field value with additional information added to the `suffix` area.
        This prop accepts text, icons and even buttons.
- example: 
```jsx 
<AutoCompleteWithLabel
  suffix={[<Text>Suffix</Text>]}
  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:<br/>
        &emsp;- `listItemSectionBuilder` - use it to group list items into sections by type. See <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemsection">ListItemSection</a> for more details.<br/>
        &emsp;- `listItemActionBuilder` - use it to add text buttons for related list actions, e.g., ‘Manage categories’. See <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemaction">ListItemAction</a> for more details.<br/>
        &emsp;- `listItemSelectBuilder` - use it to build custom list designs. See <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemselect">ListItemSelect</a> 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: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
    listItemSelectBuilder({
      id: 1,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
    listItemSelectBuilder({
      id: 2,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <AutoCompleteWithLabel
        label="List Item Section"
        options={listItemSectionOptions}
      />
      <AutoCompleteWithLabel
        label="List Item Action"
        options={listItemActionOptions}
      />
      <AutoCompleteWithLabel
        label="List Item Select"
        options={listItemSelectOptions}
      />
    </StorybookComponents.Stack>
  );
};
```

### 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 (
    <StorybookComponents.Stack flexDirection="column">
      <AutoCompleteWithLabel
        label="Max Height 180px"
        maxHeightPixels="180px"
        options={options}
      />
      <AutoCompleteWithLabel
        label="Max Height 400px"
        maxHeightPixels="400px"
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
```




    


## 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 (
    <Layout>
      <Cell>
        <InputWithLabel
          label="Address"
          suffix={[
            <InfoIcon content="Your address must match your credit card's billing address." />,
          ]}
        />
      </Cell>
      <Cell span={6}>
        <InputWithLabel label="City" />
      </Cell>
      <Cell span={6}>
        <InputWithLabel label="Postal Code" />
      </Cell>
      <Cell span={6}>
        <AutoCompleteWithLabel label="Country" options={countries} />
      </Cell>
      <Cell span={6}>
        <InputWithLabel label="Phone" />
      </Cell>
    </Layout>
  );
};
```