wix-style-react
Version:
56 lines (55 loc) • 2.71 kB
JavaScript
export default {
description:
'AutoCompleteWithLabel allows users to select a single item from a predefined list of options. This component provides an editable input field for filtering the list and a built-in label.',
do: ['Use it in Wix Premium checkout form.'],
dont: [
'Don’t use it in Wix Business Manager applications, use <Autocomplete/> instead.',
],
featureExamples: [
{
title: 'Status',
description: `Control the component status using a \`status\` prop. It supports 2 states:<br/>
 - \`error\` - use it to highlight an invalid search keyword that has no matching results<br/>
 - \`warning\` - use it to highlight value that impacts the user or can’t be validated`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop.<br/>
<br/>
It only works when \`status\` is set to \`error\`.`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Disable all input interactions with \`disabled\` prop. Use it to highlight unavailable functions.`,
example: '_disabled',
},
{
title: 'Suffix',
description: `Explain the field value with additional information added to the \`suffix\` area.
This prop accepts text, icons and even buttons.`,
example: '_suffix',
},
{
title: 'List item builders',
description: `Build custom layouts with:<br/>
 - \`listItemSectionBuilder\` - use it to group list items into sections by type. See <a href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemsection">ListItemSection</a> for more details.<br/>
 - \`listItemActionBuilder\` - use it to add text buttons for related list actions, e.g., ‘Manage categories’. See <a href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemaction">ListItemAction</a> for more details.<br/>
 - \`listItemSelectBuilder\` - use it to build custom list designs. See <a href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemselect">ListItemSelect</a> for more details.`,
example: '_listItemBuilders',
},
{
title: 'List container height',
description: `Control container size with \`maxHeightPixels\` prop. Use it to restrict the height of longer lists of options.`,
example: '_listContainerHeight',
},
],
commonUseCaseExamples: [
{
title: 'Checkout Form',
description: `The autocomplete selection only be used in a Premium Checkout form.`,
example: '_checkoutForm',
},
],
};