## Feature Examples ### Authorization - description:

Requests to Atlas must be authorized using an authorization header. Check out this Wix Doc about how to retrieve a signed instance in your environment.

Pass an authorization token to AtlasAddressInput using the token prop.

- example: ```jsx ; ``` ### 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 ; ``` ### 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 ; ``` ### 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 ; ``` ### 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 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 .

    - example: ```jsx For all default cases: For narrow layouts only: ; ``` ### Disabled - description:

    Disable all input interactions with disabled prop. Use it to highlight unavailable functions.

    - example: ```jsx ; ``` ### 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 ( 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 ; ``` ### 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 } placeholder="Option prefix" /> ; ``` ### 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 ; ``` ## 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 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 ( ); }; ```