Skip to main content

HelperText

Feedback & Status

HelperText

Inline text slot that displays validation or guidance under inputs.

Usage

Pair with TextInput, Select, or any control that benefits from instructions.

Highlights

  • Error and info variants
  • Token-based color palette

When to use it

  • Show validation errors after blur or submit.
  • Explain formatting expectations.

Related components

TextInputStateLayer

Examples​

Default​

Preview (Web)
import { HelperText } from 'react-native-molecules/components/HelperText';

export default function Example() {
  return <HelperText>This is helper text</HelperText>;
}

Error State​

Preview (Web)
import { HelperText } from 'react-native-molecules/components/HelperText';

export default function Example() {
  return <HelperText variant="error">This is an error message</HelperText>;
}

Info State​

Preview (Web)
import { HelperText } from 'react-native-molecules/components/HelperText';

export default function Example() {
  return <HelperText variant="info">This is an info message</HelperText>;
}
PropTypeDefaultDescription
childrenRequiredReactNode—Text content of the HelperText.
styleStyleProp<TextStyle>——
testIDstring | undefined—TestID used for testing purposes
variant"error" | "info" | undefined—Type of the helper text.
visibleboolean | undefined—Whether to display the helper text.
Defined in react-native-molecules/components/HelperText