## 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 ; ``` ### 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 ; ``` ### 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 ; ``` ### 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 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 ( 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 ; ``` ### 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 ( ); }; ``` ### Prefix - description:

    Specify icons on the left side with prefix prop or choose not to show it by setting prefix to null.

    By default, 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: , }), addressInputItemBuilder({ id: 2, displayLabel: 'Address 2 Country', mainLabel: 'Address 2', secondaryLabel: 'Country', prefix: , }), ]; return ( ); }; ``` ## 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: , title: 'Use current location', href: 'https://www.wix.com', target: '_blank', }), listItemSectionBuilder({ 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: , 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: , suffix: '34km away', optionLayout: 'double-line', }), ]; const handleSelect = (value) => setValue( value.id === 0 ? 'Didžioji gatvė 28, Vilnius Lithuania' : value.label, ); return ( setValue('')} onChange={(e) => setValue(e.target.value)} /> ); }; ```