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

wix-style-react

export const _structure = `
<LabelledElement label="Label">
  <Input />
</LabelledElement>;`;

export const _controlled = `
() => {
  const [value, setState] = React.useState(null);
  return (
    <LabelledElement
      label="Label"
      value={value}
    >
      <NumberInput value={value} onChange={value => setState(value)} />
    </LabelledElement>
  );
};`;

export const _checkoutForm = `
<Layout>
  <Cell>
    <LabelledElement label="Card Number">
      <Input />
    </LabelledElement>
  </Cell>
  <Cell span={6}>
    <LabelledElement label="Expiration">
      <Input />
    </LabelledElement>
  </Cell>
  <Cell span={6}>
    <LabelledElement label="CCV">
      <Input suffix={<Input.Affix><InfoIcon content="Last 3 digits on the back of your card"/></Input.Affix>}/>
    </LabelledElement>
  </Cell>
</Layout>;`;