TextInput
Capture string input from user
Import
Source
Docs
Package
Usage
Use TextInput when you need to capture text from user. Component supports all props from Input and InputWrapper components:
Radius
Size
<TextInputplaceholder="Your name"label="Full name"required/>
Controlled
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
Accessibility
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
Built by Vitaly Rtishchev and these awesome people