TextInput

Capture string input from user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Use TextInput when you need to capture text from user. Component supports all props from Input and InputWrapper components. See full information about shared inputs props in inputs guide.

Controlled

import React, { useState } from 'react';
import { TextInput } from '@mantine/core';

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

Get element ref

You can get input ref with elementRef prop:

import React, { useRef } from 'react';
import { TextInput } from '@mantine/core';

function Demo() {
  const ref = useRef(null);
  return <TextInput elementRef={ref} />;
}

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