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