@wix/design-system/dist/docs/components/InputWithLabelExamples.md

@wix/design-system

## Feature Examples


### Status
- description: Control component status using `status` prop. It supports two states:<br/>
        &emsp;- `error` - use it to highlight an invalid value<br/>
        &emsp;- `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: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <InputWithLabel label="Error" status="error" />
  <InputWithLabel
    label="Error with message"
    status="error"
    statusMessage="Message explaining the status"
  />
</StorybookComponents.Stack>;
```

### 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: 
```jsx 
_statusMessage
```

### Disabled
- description: Disable all input interactions with `disabled` prop. Use it to highlight unavailable functions.
- example: 
```jsx 
<InputWithLabel
  label="Field"
  value="Disabled"
  disabled
/>;
```

### 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: 
```jsx 
<StorybookComponents.Stack flexDirection="column" gap="0">
  <InputWithLabel label="One item" suffix={[<Icons.InfoCircle />]} />
  <InputWithLabel
    label="Two items"
    suffix={[<Icons.Hidden />, <Icons.LockLocked />]}
  />
  <InputWithLabel
    label="Three items"
    suffix={[
      <Box>Suffix</Box>,
      <Icons.LockLocked />,
      <Box color="B10">
        <Icons.ExternalLink style={{ cursor: 'pointer' }} />
      </Box>,
    ]}
  />
  <InputWithLabel
    label="Hover icon to see cursor change"
    suffix={[
      <Box color="B10">
        <Icons.InfoCircle style={{ cursor: 'pointer' }} />
      </Box>,
    ]}
  />
</StorybookComponents.Stack>;
```

### 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: 
```jsx 
<StorybookComponents.Stack flexDirection="column" gap="0">
  <InputWithLabel
    label="Text"
    type="text" />
  <InputWithLabel
    label="Number"
    type="number" />
  <InputWithLabel
    label="Password"
    type="password" />
</StorybookComponents.Stack>;
```

### Max length
- description: Restrict the number of characters that can be entered into a field with the `maxLength` prop.
- example: 
```jsx 
<InputWithLabel
  label="Start typing to see that field accept no more than 5 characters"
  maxLength={5}
/>
```

### Bottom line border
- description: Style the component using `border` prop. It supports 2 styles:<br/>
        &emsp;- `default` - use in all common cases.<br/>
        &emsp;- `bottomLine` - use as a title which can be edited on the click.<br/>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column" gap="0">
  <InputWithLabel
    label="Default"
    border="standard"
  />
  <InputWithLabel
    label="Bottom line"
    border="bottomLine"
  />
</StorybookComponents.Stack>;
```




    


## Common Use Case Examples


### Checkout form
- description: This input with labels can only be used to build a Premium Checkout form.
- example: 
```jsx 
<Card>
  <Card.Content>
    <Layout>
      <Cell>
        <Text>Card Details</Text>
      </Cell>
      <Cell>
        <InputWithLabel label="Card Number" type="number" maxLength={16} />
      </Cell>
      <Cell span={6}>
        <InputWithLabel label="Expiration" type="number" maxLength={5} />
      </Cell>
      <Cell span={6}>
        <InputWithLabel
          label="CVV"
          type="number"
          maxLength={5}
          suffix={[
            <InfoIcon content="Last 3 digits on the back of your card" />,
          ]}
        />
      </Cell>
    </Layout>
  </Card.Content>
</Card>;
```