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
children	React.ReactNode	—	Children for composable API. Use TextInput.Label, TextInput.Left, TextInput.Right, etc.
testID	string | undefined	—	testID to be used on tests.
onBlur	(((e: BlurEvent) => void) & ((args: BlurEvent) => void)) | undefined	—	Callback when input loses focus.
onFocus	(((e: FocusEvent) => void) & ((args: FocusEvent) => void)) | undefined	—	Callback when input is focused.
selectionColor	ColorValue | undefined	—	Selection color of the input
defaultValue	string | undefined	—	Default value for uncontrolled usage.
editable	boolean | undefined	—	If false, text is not editable.
multiline	boolean | undefined	—	Whether the input can have multiple lines.
onChangeText	(((text: string) => void) & ((text: string) => void)) | undefined	—	Callback that is called when the text input's text changes.
placeholder	string | undefined	—	—
placeholderTextColor	ColorValue | undefined	—	Placeholder text color.
value	string | undefined	—	Value of the text input (for controlled usage).
ref	React.Ref<TextInputHandles | null> | undefined	—	—
variant	TextInputVariant | undefined	—	Variant of the TextInput. - `flat` - flat input with an underline. - `outlined` - input with an outline. - `plain` - plain input without any decoration.
size	TextInputSize | undefined	—	Size of the TextInput.
disabled	boolean | undefined	—	If true, user won't be able to interact with the component.
error	boolean | undefined	—	Whether to style the TextInput with error style.
required	boolean | undefined	—	To display the required indicator in the Label
style	StyleProp<ViewStyle>	—	Style of the container.
containerProps	ViewProps | undefined	—	Props for the container that is directly inside the context container which is horizontal layout
inputWrapperProps	ViewProps | undefined	—	Style of the Input Container
stateLayerProps	ViewProps | undefined	—	props for the stateLayer (flat variant)
render	((props: RenderProps) => ReactNode) | undefined	—	Render custom input component.
inputStyle	StyleProp<TextStyle>	—	—

Defined in react-native-molecules/components/TextInput