## Feature Examples

### Authorization
- description: Requests to Atlas must be authorized using an authorization header. Check out this [Wix Doc](https://bo.wix.com/wix-docs/rest/internal-tools/atlas/introduction#internal-tools_atlas_introduction_atlas-v2-api-authorization) about how to retrieve a signed instance in your environment. Pass an authorization token to AtlasAddressInput using the `token` prop.
- example:
```jsx
<AtlasAddressInput placeholder="Search..." token="some_auth_token" />;
```

### 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 more dense and narrow layouts.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AtlasAddressInput placeholder="Large" size="large" />
  <AtlasAddressInput placeholder="Medium" size="medium" />
  <AtlasAddressInput 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 filter. - `standard` - use it in a form. - `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">
  <AtlasAddressInput placeholder="Round" border="round" />
  <AtlasAddressInput placeholder="Standard" border="standard" />
  <AtlasAddressInput placeholder="Bottom Line" border="bottomLine" />
  <AtlasAddressInput placeholder="None" border="none" />
</StorybookComponents.Stack>;
```

### Status
- description: Control component status using `status` prop. It supports 3 states: - `error` - use it to highlight invalid input value. - `warning` - use it to highlight value that can't be validated. - `loading` - use it to indicate a delayed response from the server.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AtlasAddressInput placeholder="Error" status="error" />
  <AtlasAddressInput placeholder="Warning" status="warning" />
  <AtlasAddressInput 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 statusMessage="This is an error message." status="error">
      <AtlasAddressInput placeholder="See message below" />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For narrow layouts only:</Text>
    <AtlasAddressInput
      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
<AtlasAddressInput placeholder="Disabled" disabled />;
```

### Clear button
- description: Control whether to show a clear button with `clearButton` prop. It allows you to clear the field quickly when a value is optional.
- example:
```jsx
() => {
  const [value, setValue] = React.useState(
    '903  Wilmar Farm Road, Rockville, Maryland',
  );
  return (
    <AtlasAddressInput
      placeholder="Search for address..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
      clearButton={true}
      onClear={() => setValue('')}
    />
  );
};
```

### Options layout
- description: Control options list layout with `optionLayout` prop. It supports 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
<StorybookComponents.Stack flexDirection="column">
  <AtlasAddressInput placeholder="Single Line" optionLayout="single-line" />
  <AtlasAddressInput placeholder="Double Line" optionLayout="double-line" />
</StorybookComponents.Stack>;
```

### Options affix
- description: Add supportive info to an options list in defined affix areas: - `optionPrefix` - use the location icon by default. Override only in cases where more specific context is needed, i.e. defining work address. - `optionSuffix` - use it to provide extra info about address.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AtlasAddressInput
    optionPrefix={<Icons.Toolbox />}
    placeholder="Option prefix"
  />
  <AtlasAddressInput optionSuffix="5km away" placeholder="Option suffix" />
</StorybookComponents.Stack>;
```

### No results
- description: Control the message displayed in the dropdown layout when no results are found via `noResultsText`
- example:
```jsx
() => (
  <Box gap="20px" direction="vertical">
    <AtlasAddressInput
      placeholder="Search for an address"
      noResultsText="No matching addresses found"
    />
  </Box>
);
```

### Localization
- description: Translate search results per country by providing language and locale details. - Specify the language with `language` prop. - Specify a required address formatting with `locale` prop.
- example:
```jsx
<AtlasAddressInput placeholder="Search..." language="en" locale="en-us" />;
```

## Common Use Case Examples

### Custom address
- description: Define custom address formatting using `onSelect` callback that provides a `getAddress` function to fetch a [Wix Address Object](https://github.com/wix-private/p13n/blob/master/protos/common/src/main/proto/wix/common/address.proto) from Atlas. This example displays a post code along with the address.
- example:
```jsx
() => {
  const [value, setValue] = React.useState('');

  const onChange = (event) => setValue(event.target.value);

  const onClear = () => setValue('');

  const onSelect = (option, getAddress) => {
    getAddress().then((address) => {
      setValue(`${option.label} - ${address.postalCode}`);
    });
  };

  return (
    <AtlasAddressInput
      onChange={onChange}
      onClear={onClear}
      onSelect={onSelect}
      value={value}
      token="some_auth_token"
      placeholder="Type address and select it"
    />
  );
};
```