# Code

### API

This component extends the native [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) API. That's why the `className` prop is not included in the table.

| Props      | Type    | Required |
| ---------- | ------- | -------- |
| children   | string  | ✅        |
| hasError   | boolean | ❌        |
| isDisabled | boolean | ❌        |
| isReadOnly | boolean | ❌        |

<details>

<summary>children</summary>

The children in this case should always be a string, because we are using the `span` element innerly, so adding a `<p>` inside a `<span>` makes no sense.

</details>

<details>

<summary>hasError</summary>

The hasError prop sets the component state to an error state, changing its colors by the ones defined in the tokens.

</details>

<details>

<summary>isDisabled</summary>

Disables the component by changing its state.&#x20;

</details>

<details>

<summary>isReadOnly</summary>

This causes the component to be read only. This overrides the hasError state.

</details>

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo</td><td><a href="https://codesandbox.io/s/help-text-fdv5w9">Code Sandbox</a></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

{% embed url="https://codesandbox.io/p/sandbox/helptext-pm3n5x?file=/src/App.tsx:1,1" fullWidth="true" %}
