## Usage
### React
```tsx
import React from 'react';
import { KvFormHelpText } from '@kelvininc/react-ui-components';
export const FormHelpTextExample: React.FC = () => (
<>
{/*-- Default --*/}
{/*-- Default with array of strings --*/}
{/*-- Default with error state --*/}
);
```
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | ------------------------------- | ----------------------------------------------------------------------------- | ----------------------- |
| `helpText` | `help-text` | (optional) Form field help text | `string \| string[]` | `[]` |
| `state` | `state` | (optional) Form field state | `EValidationState.Invalid \| EValidationState.None \| EValidationState.Valid` | `EValidationState.None` |
## CSS Custom Properties
| Name | Description |
| --------------------------- | -------------------------------------- |
| `--help-text-default-color` | Help Text color when state is default. |
| `--help-text-error-color` | Help Text color when state is invalid. |
## Dependencies
### Used by
- [kv-date-time-input](../date-time-input)
- [kv-text-field](../text-field)
### Depends on
- [kv-icon](../icon)
### Graph
```mermaid
graph TD;
kv-form-help-text --> kv-icon
kv-date-time-input --> kv-form-help-text
kv-text-field --> kv-form-help-text
style kv-form-help-text fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------