Code

API

This component extends the native <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	❌

children

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.

hasError

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

isDisabled

Disables the component by changing its state.

isReadOnly

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

Example

Live Demo

Code Sandbox

https://codesandbox.io/p/sandbox/helptext-pm3n5x?file=/src/App.tsx:1,1codesandbox.io