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

Outlined Variant (default)

Preview (Web)

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

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

Flat Variant

Preview (Web)

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

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

With Left Element

Preview (Web)

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

export default function Example() {
  return (
      <TextInput variant="outlined" placeholder="Search">
          <TextInput.Left>
              <TextInput.Icon name="magnify" type="material-community" />
          </TextInput.Left>
          <TextInput.Label>Search</TextInput.Label>
      </TextInput>
  );
}

With Right Element

Preview (Web)

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

export default function Example() {
  return (
      <TextInput variant="outlined" placeholder="Enter password" secureTextEntry={true}>
          <TextInput.Label>Password</TextInput.Label>
          <TextInput.Right>
              <TextInput.Icon name="eye" type="material-community" />
          </TextInput.Right>
      </TextInput>
  );
}

With Supporting Text

We need an extra view wrapper because SupportingText is rendered outside of the input field without any wrapper

Preview (Web)

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

export default function Example() {
  return (
      <View>
          <TextInput variant="outlined" placeholder="Enter email">
              <TextInput.Label>Email</TextInput.Label>
              <TextInput.SupportingText>
                  We'll never share your email
              </TextInput.SupportingText>
          </TextInput>
      </View>
  );
}

Error State

Preview (Web)

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

export default function Example() {
  return (
      <View>
          <TextInput variant="outlined" placeholder="Enter email" error>
              <TextInput.Left>
                  <TextInput.Icon name="email" type="material-community" />
              </TextInput.Left>
              <TextInput.Label>Email</TextInput.Label>
              <TextInput.Right>
                  <TextInput.Icon name="alert-circle" type="material-community" />
              </TextInput.Right>
              <TextInput.SupportingText>
                  Invalid email format
              </TextInput.SupportingText>
          </TextInput>
      </View>
  );
}

Complete Example

Preview (Web)

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

export default function Example() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  return (
      <>
          <TextInput
              style={{ marginRight: 12 }}
              variant="outlined"
              placeholder="Enter email"
              value={email}
              onChangeText={setEmail}>
              <TextInput.Left>
                  <TextInput.Icon name="email" type="material-community" />
              </TextInput.Left>
              <TextInput.Label>Email</TextInput.Label>
          </TextInput>

          <TextInput
              variant="outlined"
              placeholder="Enter password"
              value={password}
              onChangeText={setPassword}
              secureTextEntry={true}>
              <TextInput.Label>Password</TextInput.Label>
              <TextInput.Right onPress={() => setShowPassword(!showPassword)}>
                  <TextInput.Icon
                      name={showPassword ? "eye-off" : "eye"}
                      type="material-community"
                  />
              </TextInput.Right>
          </TextInput>
      </>
  );

}

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