v4.2.12

TextInput

Capture string input from user
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { TextInput } from '@mantine/core';


function Demo() {
  return (
    <TextInput
      placeholder="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

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


function Demo() {
  return <TextInput disabled />
}

With icon

import { TextInput } from '@mantine/core';
import { At } from 'tabler-icons-react';


function Demo() {
  return <TextInput label="Your email" placeholder="Your email" icon={<At size={14} />} />;
}

With right section

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


function Demo() {
  return <TextInput label="Your email" placeholder="Your email" rightSection={<Loader size="xs" />} />;
}

Get input ref

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


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

Accessibility

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

<TextInput /> // -> not ok, input is not labeled
<TextInput label="My input" /> // -> ok, input and label is connected
<TextInput aria-label="My input" /> // -> ok, label is not visible but will be announced by screen reader
Go back
Textarea – @mantine/core
Up next
TransferList – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter