Capture string input from user


Use TextInput when you need to capture text from user. Component supports all props from Input and InputWrapper components:

placeholder="Your name"
label="Full name"


import { useState } from 'react';
import { TextInput } from '@mantine/core';
function Demo() {
const [value, setValue] = useState('');
return <TextInput value={value} onChange={(event) => setValue(event.currentTarget.value)} />;

Invalid state and error

Invalid email
// Error as boolean – red border color
<TextInput error />
// Error as React node – red border color and message below input
<TextInput error="Invalid email" />

Disabled state

<TextInput disabled />

With icon

You can use any React node as icon:

<TextInput icon={<MailIcon />} />

With right section

You can use any React node as right section:

<TextInput label="Your email" placeholder="Your email" rightSection={<Loader size="xs" />} />

Get element ref

You can get input ref with elementRef prop:

import { useRef } from 'react';
import { TextInput } from '@mantine/core';
function Demo() {
const ref = useRef(null);
return <TextInput elementRef={ref} />;

Server side rendering

Component uses use-id hook to generate unique ids and aria- attributes, provide static id prop to prevent props mismatch:

<TextInput /> // -> random id generated both on client and server, props mismatch warning
<TextInput id="my-input" /> // -> id is static, no mismatches


Provide aria-label in case you use component without label for screen reader support:

<TextInput label="My input" />; // -> ok, input and label is connected
<TextInput />; // not ok, input is not labeled
<TextInput aria-label="My input" />; // -> ok, label is not visible but will be announced by screen reader
Build fully functional accessible web applications with ease
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback