TextInput

Single-line text input with validation

Import: import { TextInput } from 'react-native-mantine';

Usage

import { TextInput } from 'react-native-mantine';

// Basic TextInput
<TextInput
  label="Email"
  placeholder="your@email.com"
  value={email}
  onChangeText={setEmail}
/>

// With description and error
<TextInput
  label="Password"
  description="Must be at least 8 characters"
  placeholder="Enter password"
  secureTextEntry
  error={error}
  required
/>

// With icon and right section
<TextInput
  label="Search"
  placeholder="Type to search..."
  icon={<SearchIcon />}
  rightSection={<ClearButton />}
/>

Props

Prop	Type	Default	Description
`label`	`React.ReactNode`		Input label displayed above the input field
`description`	`React.ReactNode`		Description text displayed below the label and above the input
`error`	`React.ReactNode`		Error message displayed below the input. When set, input border becomes red
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'sm'`	Input size that controls height, font size, and padding
`radius`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`'sm'`	Key of theme.radius or any valid number to set border-radius
`icon`	`React.ReactNode`		Icon displayed on the left side of the input field
`rightSection`	`React.ReactNode`		Content displayed on the right side of the input (e.g., clear button, visibility toggle)
`rightSectionWidth`	`number`		Width of the right section in pixels. If not set, defaults to input height
`required`	`boolean`	`false`	Displays a red asterisk (*) after the label to indicate field is required
`variant`	`'default' \| 'filled' \| 'unstyled'`	`'default'`	Controls input appearance: default (outlined), filled (background), or unstyled (no borders)
`style`	`ViewStyle`		Additional styles applied to the input element itself
`wrapperStyle`	`ViewStyle`		Additional styles applied to the wrapper container
`placeholder`	`string`		Placeholder text displayed when input is empty
`value`	`string`		Input value for controlled component
`onChangeText`	`(text: string) => void`		Callback fired when input value changes
`editable`	`boolean`	`true`	If false, input is read-only and cannot be edited
`multiline`	`boolean`	`false`	If true, input can contain multiple lines of text
`secureTextEntry`	`boolean`	`false`	If true, text input obscures the entered text (for passwords)
`autoCapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	`'sentences'`	Controls automatic capitalization behavior
`keyboardType`	`KeyboardTypeOptions`	`'default'`	Determines which keyboard to open (e.g., numeric, email-address, phone-pad)

Source on GitHub · npm