TextInput

Usage

TextInput component supports Input and Input.Wrapper components features and all input element props. TextInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

import { TextInput } from '@mantine/core';

function Demo() {
  return (
    <TextInput
      label="Input label"
      description="Input description"
      placeholder="Input placeholder"
    />
  );
}

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)}
    />
  );
}

Left and right sections

TextInput supports leftSection and rightSection props. These sections are rendered with absolute position inside the input wrapper. You can use them to display icons, input controls or any other elements.

You can use the following props to control sections styles and content:

• rightSection/leftSection – React node to render on the corresponding side of input
• rightSectionWidth/leftSectionWidth – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.
• rightSectionPointerEvents/leftSectionPointerEvents – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.

import { TextInput, rem } from '@mantine/core';
import { IconAt } from '@tabler/icons-react';

function Demo() {
  const icon = <IconAt style={{ width: rem(16), height: rem(16) }} />;
  return (
    <>
      <TextInput
        leftSectionPointerEvents="none"
        leftSection={icon}
        label="Your email"
        placeholder="Your email"
      />
      <TextInput
        mt="md"
        rightSectionPointerEvents="none"
        rightSection={icon}
        label="Your email"
        placeholder="Your email"
      />
    </>
  );
}

Error state

import { TextInput } from '@mantine/core';

function Demo() {
  return (
    <>
      <TextInput label="Boolean error" placeholder="Boolean error" error />
      <TextInput
        mt="md"
        label="With error message"
        placeholder="With error message"
        error="Invalid name"
      />
    </>
  );
}

Disabled state

import { TextInput } from '@mantine/core';

function Demo() {
  return <TextInput disabled label="Disabled input" placeholder="Disabled input" />;
}

Styles API

TextInput supports Styles API, you can add styles to any inner element of the component withclassNames prop. Follow Styles API documentation to learn more.

/*
 * Hover over selectors to apply outline styles
 *
 */

Get element ref

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

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

Accessibility

If TextInput is used without label prop, it will not be announced properly by screen reader:

import { TextInput } from '@mantine/core';

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <TextInput />;
}

Set aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:

import { TextInput } from '@mantine/core';

// Accessible input – it has aria-label
function Demo() {
  return <TextInput aria-label="My input" />;
}

If label prop is set, input will be accessible it is not required to set aria-label:

import { TextInput } from '@mantine/core';

// Accessible input – it has associated label element
function Demo() {
  return <TextInput label="My input" />;
}