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>;
}

Prop	Type	Default	Description
childrenRequired	ReactNode	—	—
style	StyleProp<TextStyle>	—	—
testID	string | undefined	—	—
variant	"error" | "info" | undefined	—	—
visible	boolean | undefined	—	—

Defined in react-native-molecules/components/HelperText