Skip to main content

Text Input

Text inputs allow users to enter text into a UI. They typically appear in forms and dialogs.

Text inputs come in three variants:

  • Filled text inputs
  • Outlined text inputs
  • Standard text inputs

💬 Feedback 🎨 Material Design

Import

import { TextInput } from "@react-native-material/core";

Usage

Here's a basic usage example of the Input component:

Filled

Outlined

Standard

Props

variant

The variant to use.

Type: "filled" | "outlined" | "standard";

Default: "filled"

Optional: Yes


label

The label to display.

Type: string;

Optional: Yes


leading

The element placed before the text input.

Type: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;

Optional: Yes


trailing

The element placed after the text input.

Type: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;

Optional: Yes


color

The color of the text input's content (e.g. label, icons, selection).

Type: Color;

Default: "primary"

Optional: Yes


helperText

The helper text to display.

Type: string;

Optional: Yes


onMouseEnter

Callback function to call when user moves pointer over the input.

Type: (event: NativeSyntheticEvent<TargetedEvent>) => void;

Optional: Yes


onMouseLeave

Callback function to call when user moves pointer away from the input.

Type: (event: NativeSyntheticEvent<TargetedEvent>) => void;

Optional: Yes


style

The style of the container view.

Type: StyleProp<ViewStyle>;

Optional: Yes


inputContainerStyle

The style of the text input container view.

Type: StyleProp<ViewStyle>;

Optional: Yes


inputStyle

The style of the text input.

Type: RNTextInputProps["style"];

Optional: Yes


leadingContainerStyle

The style of the text input's leading element container.

Type: StyleProp<ViewStyle>;

Optional: Yes


trailingContainerStyle

The style of the text input's trailing element container.

Type: StyleProp<ViewStyle>;

Optional: Yes


...TextInputProps, ...TextInputProps