# Component/Form/FormHelperText

> Props: component-form-formhelpertext.props.txt

## Examples


### Base

```tsx
{
  args: {
    children: 'Info message',
    status: 'info'
  }
}
```

### Error

```tsx
{
  args: {
    children: 'Error message',
    as: 'div',
    status: 'error'
  }
}
```

### Success

```tsx
{
  args: {
    children: 'Success message',
    as: 'p',
    status: 'success'
  }
}
```

### With Button

```tsx
{
  render: () => <>
      <Stack direction='column' p={12} style={{
      width: '320px'
    }}>
        <Button size='xxlarge' kind='primary'>
          Label
        </Button>
        <FormHelperText>Info message</FormHelperText>
      </Stack>
    </>
}
```

### With Icon

```tsx
{
  render: () => <>
      <Stack direction='column' p={12} style={{
      width: '320px'
    }}>
        <FormHelperText icon>Info message</FormHelperText>
        <FormHelperText status='success' icon>
          Success message
        </FormHelperText>
        <FormHelperText status='error' icon>
          Error message
        </FormHelperText>
        <FormHelperText icon={<IconCart />}>Info message</FormHelperText>
        <FormHelperText status='success' icon={<IconCart />}>
          Success message
        </FormHelperText>
        <FormHelperText status='error' icon={<IconCart />}>
          Error message
        </FormHelperText>
      </Stack>
    </>
}
```

### With React Node

```tsx
{
  render: () => <>
      <Stack direction='column' p={12} style={{
      width: '320px'
    }}>
        <Button size='xxlarge' kind='primary'>
          Label
        </Button>
        <FormHelperText>
          Info message
          <Ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </Ul>
        </FormHelperText>
      </Stack>
    </>
}
```

### With React Node And Icon

```tsx
{
  render: () => <>
      <Stack direction='column' p={12} style={{
      width: '320px'
    }}>
        <Button size='xxlarge' kind='primary'>
          Label
        </Button>
        <FormHelperText icon>
          Info message
          <Ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </Ul>
        </FormHelperText>
      </Stack>
    </>
}
```