Getting Started

API Reference

Examples

Text Props

The text prop group contains all properties related to text content, including labels, placeholders, values, and text styling options.

Properties

PropTypeDefaultDescription
placeholderTextstringundefinedPlaceholder text for the input field
placeholderTextColorstring#A0A0A0Color of the placeholder text
inputTextColorstring#000000Color of the input text
labelTextstringundefinedText for the label
labelTextColorstring#000000Color of the label text
requiredTextstring*Text to display instead of '*' when the input is required
errorTextstringundefinedText to display below input when there is an error
valuestringundefinedValue of the input field
hideLabelbooleanfalseBoolean to hide the label
characterLimitnumberundefinedMaximum number of characters allowed in the input
showCharacterLimitbooleanfalseBoolean to show the character limit below input field

Example

tsx
import { FormInput } from '@react-native-utils/forminput';

// Using the text prop group
const TextPropsExample = () => (
  <FormInput
    text={{
      labelText: "Full Name",
      placeholderText: "Enter your full name",
      placeholderTextColor: "#999",
      inputTextColor: "#333",
      value: "John Doe",
      characterLimit: 50,
      showCharacterLimit: true,
      errorText: "Name is required!"
    }}
  />
);

Notes

  • Use characterLimit with showCharacterLimit to provide visual feedback on character count
  • The errorText will only display when the hasError prop (in the core group) is set to true
  • When hideLabel is true, the label won't be visible but it will still be accessible to screen readers