TextInput

Inputs & Controls

TextInput

Material text field with outlined and filled variants, leading/trailing adornments.

Usage

Capture short or long-form textual data with validation states.

Highlights

• Floating label + helper integration
• Supports secure entry and formatting hooks

When to use it

• Forms require accessible labeling and error messaging.
• Need to embed icons or buttons inside inputs.

Related components

HelperTextInputAddonElementGroup

Examples

Default

Preview (Web)

import { TextInput } from 'react-native-molecules/components/TextInput';

export default function Example() {
  return <TextInput placeholder="Placeholder" />;
}

Outlined Variant

Preview (Web)

import { TextInput } from 'react-native-molecules/components/TextInput';

export default function Example() {
  return <TextInput variant="outlined" placeholder="Placeholder" label="Label" />;
}

Flat Variant

Preview (Web)

import { TextInput } from 'react-native-molecules/components/TextInput';

export default function Example() {
  return <TextInput variant="flat" placeholder="Placeholder" label="Label" />;
}

With Left Element

Preview (Web)

import { Icon } from 'react-native-molecules/components/Icon';
import { TextInput } from 'react-native-molecules/components/TextInput';

export default function Example() {
  return (
      <TextInput 
          variant="flat" 
          placeholder="Placeholder" 
          label="Label" 
          left={({ color, forceFocus }) => (
              <Icon
                  name="magnify"
                  type="material-community"
                  size={24}
                  onPress={forceFocus}
                  color={color}
              />
          )} 
      />
  );
}

With Right Element

Preview (Web)

import { Icon } from 'react-native-molecules/components/Icon';
import { TextInput } from 'react-native-molecules/components/TextInput';

export default function Example() {
  return (
      <TextInput 
          variant="flat" 
          placeholder="Placeholder" 
          label="Label" 
          right={({ color, forceFocus }) => (
              <Icon
                  name="magnify"
                  type="material-community"
                  size={24}
                  onPress={forceFocus}
                  color={color}
              />
          )} 
      />
  );
}

Prop	Type	Default	Description
style	StyleProp<TextStyle>	—	Pass `fontSize` prop to modify the font size inside `TextInput`. Pass `height` prop to set `TextInput` height. Pass `backgroundColor` prop to set `TextInput` backgroundColor.
testID	string | undefined	—	testID to be used on tests.
numberOfLines	number | undefined	—	The number of lines to show in the input (Android only).
selectionColor	string | undefined	—	Selection color of the input
multiline	boolean | undefined	—	Whether the input can have multiple lines.
onChangeText	(((text: string) => void) & Function) | undefined	—	Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
placeholder	string | undefined	—	Placeholder for the input.
value	string | undefined	—	Value of the text input.
ref	React.Ref<NativeTextInput | null> | undefined	—	—
variant	TextInputVariant | undefined	—	Variant of the TextInput. - `flat` - flat input with an underline. - `outlined` - input with an outline. In `outlined` variant, the background color of the label is derived from `colors?.background` in theme or the `backgroundColor` style. This component render TextInputOutlined or TextInputFlat based on that props
disabled	boolean | undefined	—	If true, user won't be able to interact with the component.
label	TextInputLabelProp | undefined	—	The text or component to use for the floating label.
error	boolean | undefined	—	Whether to style the TextInput with error style.
underlineColor	string | undefined	—	Inactive underline color of the input.
activeUnderlineColor	string | undefined	—	Active underline color of the input.
outlineColor	string | undefined	—	Inactive outline color of the input.
activeOutlineColor	string | undefined	—	Active outline color of the input.
size	TextInputSize | undefined	—	Sets min height with densed layout. For `TextInput` in `flat` mode height is `64dp` or in dense layout - `52dp` with label or `40dp` without label. For `TextInput` in `outlined` mode height is `56dp` or in dense layout - `40dp` regardless of label. When you apply `height` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput`
supportingText	string | undefined	—	The Supporting Text below the TextInput
required	boolean | undefined	—	To display the required indicator in Supporting Text and in the Label
render	((props: RenderProps) => ReactNode) | undefined	—	Callback to render a custom input component such as `react-native-text-input-mask` instead of the default `TextInput` component from `react-native`. Example: ```js <TextInput label="Phone number" render={props => <TextInputMask {...props} mask="+[00] [000] [000] [000]" /> } /> ```
inputContainerStyle	StyleProp<ViewStyle>	—	Style of the Input Container
inputStyle	StyleProp<TextStyle>	—	Style of the Input
rightElementStyle	StyleProp<TextStyle>	—	Style of the rightElement
leftElementStyle	StyleProp<TextStyle>	—	Style of the leftElement
stateLayerProps	ViewProps | undefined	—	props for the stateLayer

Defined in react-native-molecules/components/TextInput