wix-style-react/src/LabelledElement/docs/LabelledElement.content.js

wix-style-react

export default {
  description:
    'Labeled Element is used to render a label inside the input. It’s used together with various form inputs as a parent component.',
  do: ['Use it in Wix Premium checkout form.'],
  dont: [
    'Don’t use it in Wix Business Manager applications, use <FormField/> instead.',
  ],
  featureExamples: [
    {
      title: 'Structure',
      description: `Labeled Element accepts children such as \`<Input/>\` and \`<Dropdown/>\`. Control label value with \`label\` prop.`,
      example: '_structure',
    },
    {
      title: 'Controlled Input',
      description: `Use \`value\` prop when Labeled Element is used with uncontrolled form inputs like \`<AutoComplete/>\` or \`<NumberInput/>\`.`,
      example: '_controlled',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Checkout Form',
      description: `Label inside form input can be used only in Premium Checkout form.`,
      example: '_checkoutForm',
    },
  ],
};