## Feature Examples

### Size
- description: Adjust the component size using `size` prop. It supports 3 sizes: - `large` - use it in onboarding flows, where input needs emphasis. - `medium` (default) - use in all common cases. - `small` - use in dense and narrow layouts.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AddressInput placeholder="Large" size="large" />
  <AddressInput placeholder="Medium" size="medium" />
  <AddressInput placeholder="Small" size="small" />
</StorybookComponents.Stack>;
```

### Border
- description: Style the component using `border` prop. It supports 4 styles: - `round` (default) - use it when input acts as a data filter. - `standard` - use it in forms. - `bottomLine` - use as a title which can be edited on the click. - `none` - use in Content Manager's spreadsheet cell.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AddressInput placeholder="Round" border="round" />
  <AddressInput placeholder="Standard" border="standard" />
  <AddressInput placeholder="Bottom Line" border="bottomLine" />
  <AddressInput placeholder="None" border="none" />
</StorybookComponents.Stack>;
```

### Status
- description: Control component status using `status` prop. It supports 3 states: - `error` - use it to highlight an invalid input value. - `warning` - use it to highlight a value that can't be validated. - `loading` - use it to indicate a delayed response from the server.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AddressInput placeholder="Error" status="error" />
  <AddressInput placeholder="Warning" status="warning" />
  <AddressInput placeholder="Loading" status="loading" />
</StorybookComponents.Stack>;
```

### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Showing the status message inline, directly below the input is preferred in all default cases. - To add an accessible inline message, wrap the component in a `<FormField/>` and add the `statusMessage`. - To add a status message in a tooltip that requires users to hover on the icon, use the `statusMessage` prop. View more inline status message examples in `<FormField/>`.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For all default cases:</Text>
    <FormField status="error" statusMessage="This is an error message.">
      <AddressInput placeholder="See message below" />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For narrow layouts only:</Text>
    <AddressInput
      placeholder="Hover on status icon"
      status="error"
      statusMessage="This is an error message."
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

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

### Clear button
- description: Control whether to show a clear button with the `clearButton` prop. It allows to clear the field quickly when a value is optional.
- example:
```jsx
() => {
  const [value, setValue] = React.useState(
    '903  Wilmar Farm Road, Rockville, Maryland',
  );

  return (
    <AddressInput
      placeholder="Search for address..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
      clearButton={true}
      onClear={() => setValue('')}
    />
  );
};
```

### No results message
- description: Control the message displayed in the dropdown layout when no results are found via `noResultsText`.
- example:
```jsx
<AddressInput value="Invalid search term" noResultsText="No results found" />;
```

### Options layout
- description: Control an options list layout with `optionLayout` prop. It support 2 layouts for main and secondary labels: - `single-line` (default) - use it to display labels side by side. - `double-line` - use it to stack labels vertically.
- example:
```jsx
() => {
  const singleLineOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      optionLayout: 'single-line',
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      optionLayout: 'single-line',
    }),
  ];
  const doubleLineOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      optionLayout: 'double-line',
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <AddressInput placeholder="Single Line" options={singleLineOptions} />
      <AddressInput placeholder="Double Line" options={doubleLineOptions} />
    </StorybookComponents.Stack>
  );
};
```

### Prefix
- description: Specify icons on the left side with `prefix` prop or choose not to show it by setting `prefix` to null. By default, `<LocationIcon />` is displayed.
- example:
```jsx
() => {
  const noPrefixOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      prefix: null,
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      prefix: null,
    }),
  ];
  const customPrefixOptions = [
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Address 1 Country',
      mainLabel: 'Address 1',
      secondaryLabel: 'Country',
      prefix: <Icons.Toolbox />,
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Address 2 Country',
      mainLabel: 'Address 2',
      secondaryLabel: 'Country',
      prefix: <Icons.Home />,
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <AddressInput placeholder="No prefix" options={noPrefixOptions} />
      <AddressInput placeholder="Custom prefix" options={customPrefixOptions} />
    </StorybookComponents.Stack>
  );
};
```

## Common Use Case Examples

### Custom options list
- description: Use list item builders to build a custom options list layout.
- example:
```jsx
() => {
  const [value, setValue] = React.useState('');
  const options = [
    listItemActionBuilder({
      id: 0,
      prefixIcon: <Icons.Send />,
      title: 'Use current location',
      as: 'a',
      href: 'https://www.wix.com',
      target: '_blank',
    }),
    listItemSectionBuilder({
      id: 'saved-addresses',
      title: 'Saved Addresses',
      type: 'subheader',
    }),
    addressInputItemBuilder({
      id: 1,
      displayLabel: 'Work 2818 Saint Patrick Pl, Helena, AL, 35080',
      mainLabel: 'Work',
      secondaryLabel: '2818 Saint Patrick Pl, Helena, AL, 35080',
      prefix: <Icons.Toolbox />,
      suffix: '2km away',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 2,
      displayLabel: 'Home 512 4th St NE, Montgomery, MN, 56069',
      mainLabel: 'Home',
      secondaryLabel: '512 4th St NE, Montgomery, MN, 56069',
      prefix: <Icons.Home />,
      suffix: '34km away',
      optionLayout: 'double-line',
    }),
  ];

  const handleSelect = (value) =>
    setValue(
      value.id === 0 ? 'Didžioji gatvė 28, Vilnius Lithuania' : value.label,
    );
  return (
    <AddressInput
      value={value}
      onSelect={handleSelect}
      placeholder="Search places..."
      options={options}
      onClear={() => setValue('')}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};
```