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>	—	—
testID	string | undefined	—	—
numberOfLines	number | undefined	—	—
selectionColor	string | undefined	—	—
multiline	boolean | undefined	—	—
onChangeText	(((text: string) => void) & Function) | undefined	—	—
placeholder	string | undefined	—	—
value	string | undefined	—	—
ref	React.RefObject<TextInputHandles | null> | undefined	—	—
variant	TextInputVariant | undefined	—	—
disabled	boolean | undefined	—	—
label	TextInputLabelProp | undefined	—	—
error	boolean | undefined	—	—
underlineColor	string | undefined	—	—
activeUnderlineColor	string | undefined	—	—
outlineColor	string | undefined	—	—
activeOutlineColor	string | undefined	—	—
size	TextInputSize | undefined	—	—
supportingText	string | undefined	—	—
required	boolean | undefined	—	—
render	((props: RenderProps) => ReactNode) | undefined	—	—
inputContainerStyle	StyleProp<ViewStyle>	—	—
inputStyle	StyleProp<TextStyle>	—	—
rightElementStyle	StyleProp<TextStyle>	—	—
leftElementStyle	StyleProp<TextStyle>	—	—
stateLayerProps	ViewProps | undefined	—	—

Defined in react-native-molecules/components/TextInput