Component

MultilineInput

Text area input for longer values with labels and validation support.

React Native

Multiline input

Text area input for longer values.

Notes

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

export function NotesField() {
  const [notes, setNotes] = useState('');

  return (
    <MultilineInput
      label="Notes"
      animatedLabel
      placeholder="Add delivery instructions"
      numberOfLines={4}
      height={120}
      value={notes}
      onChangeText={(value) => setNotes(value)}
    />
  );
}

Live component

defaultcontrolledcustom heightdisabled

Set a predictable height for forms.
Use character limits for user-generated descriptions.

Usage

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

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

export function NotesField() {
  const [notes, setNotes] = useState('');

  return (
    <MultilineInput
      label="Notes"
      animatedLabel
      placeholder="Add delivery instructions"
      numberOfLines={4}
      height={120}
      value={notes}
      onChangeText={(value) => setNotes(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.

numberOfLinesnumber4Preferred line count for multiline text entry.

heightnumber | string-Sets the rendered height of the component.

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

Theme

MultilineInput 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
custom height
disabled

Best Practices

Set a predictable height for forms.
Use character limits for user-generated descriptions.