Component

TextInput

Single-line input with labels, icons, validation, errors, and disabled state.

React Native

Text input

Controlled single-line input with labels.

Email *

Reference

import { useState } from 'react';
import { TextInput } from '@sohantalukder/rn-kit';

export function EmailField() {
  const [email, setEmail] = useState('');
  const error =
    email.length > 0 && !email.includes('@')
      ? 'Enter a valid email address.'
      : undefined;

  return (
    <TextInput
      label="Email"
      placeholder="you@example.com"
      keyboardType="email-address"
      autoCapitalize="none"
      value={email}
      errorMessage={error}
      onChangeText={(value) => setEmail(value)}
    />
  );
}

Live component

defaultcontrollederrordisabled

Use controlled values for forms.
Show validation copy close to the input.

Usage

import { TextInput } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { TextInput } from '@sohantalukder/rn-kit';

export function EmailField() {
  const [email, setEmail] = useState('');
  const error =
    email.length > 0 && !email.includes('@')
      ? 'Enter a valid email address.'
      : undefined;

  return (
    <TextInput
      label="Email"
      placeholder="you@example.com"
      keyboardType="email-address"
      autoCapitalize="none"
      value={email}
      errorMessage={error}
      onChangeText={(value) => setEmail(value)}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

labelstring-Human-readable text associated with the form control.

animatedLabelbooleancomponent defaultFloats the label inside the field when focused or filled.

placeholderstring-Hint text shown before a value is entered or selected.

valuestring | number | boolean-Controlled value rendered by the input or control.

errorMessagestring-Validation message rendered below the input.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

requiredbooleanfalseMarks the field as required in its label presentation.

Theme

TextInput reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
controlled
error
disabled
with icons

Best Practices

Use controlled values for forms.
Show validation copy close to the input.