wix-style-react
Version:
54 lines (53 loc) • 2.23 kB
JavaScript
export default {
description:
'InputWithLabel allows you to insert short text values in a field with a built-in label. It’s constructed by wrapping a regular `<Input/>` component with `<LabeledElement/>`.',
do: ['Use it to insert text values in the Wix Premium checkout form.'],
dont: [
'Don’t use it in Wix Business Manager applications, use <FormField/> with <Input/> instead.',
],
featureExamples: [
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports two states:<br/>
 - \`error\` - use it to highlight an invalid value<br/>
 - \`warning\` - use it to highlight a value that impacts user business or can’t be validated <br/>
<br/>
Explain the status with \`statusMessage\` prop.`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user mouse hovers the status icon.
The placement of a tooltip is controlled with \`tooltipPlacement\` prop.`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Disable all input interactions with \`disabled\` prop. Use it to highlight unavailable functions.`,
example: '_disabled',
},
{
title: 'Suffix',
description: `Explain field values with additional information added to the \`suffix\` area.
This prop accepts text, icons and even buttons. It accepts an array of objects as well.`,
example: '_suffix',
},
{
title: 'Type',
description: `Control an acceptable value format with the \`type\` prop. This component accepts all <a href="https://www.w3schools.com/html/html_form_input_types.asp">native HTML types</a>.`,
example: '_type',
},
{
title: 'Max length',
description: `Restrict the number of characters that can be entered into a field with the \`maxLength\` prop.`,
example: '_maxLength',
},
],
commonUseCaseExamples: [
{
title: 'Checkout form',
description: `This input with labels can only be used to build a Premium Checkout form.`,
example: '_checkoutForm',
},
],
};