Input

Base component to create custom inputs

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Disclaimer

!important: In most cases, you should not use Input component in your application. Input component is a base for other inputs and was not designed to be used directly.

// Incorrect usage, input is not accessible
<InputWrapper label="Input label">
  <Input />
</InputWrapper>

// Use TextInput instead of Input everywhere you want to use Input,
// it is accessible by default and includes InputWrapper
<TextInput label="Input label" description="Input description" />

Input component is used as base for all other inputs (Select, TextInput, Textarea and others). The single purpose of Input is to provide shared styles and features to other inputs. Use other components listed above to build forms (as they provide better accessibility) and Input component as base for your own custom inputs with Mantine theme.

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

function Demo() {
  return (
    <Input
      icon={<At />}
      placeholder="Your email"
    />
  );
}

Variants

Input has 3 variants, all of which are available on all Mantine inputs. Note that unstyled input variant may significantly impact usability, use it wisely.

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

function Demo() {
  return (
    <>
      <Input variant="default" placeholder="Default variant" />
      <Input variant="filled" placeholder="Filled variant" />
      <Input variant="unstyled" placeholder="Unstyled variant" />
    </>
  );
}

Icon and right section

new

import { Input, Badge } from '@mantine/core';
import { BrandTwitter } from 'tabler-icons-react';

function Demo() {
  return (
    <Input
      icon={<BrandTwitter size={16} />}
      placeholder="Your twitter"
      rightSectionWidth={70}
      styles={{ rightSection: { pointerEvents: 'none' } }}
      rightSection={
        <Badge color="blue" variant="filled">
          new
        </Badge>
      }
    />
  );
}

Right section with Tooltip:

import { Input, Tooltip } from '@mantine/core';
import { AlertCircle } from 'tabler-icons-react';

function Demo() {
  const rightSection = (
    <Tooltip label="We do not send spam" position="top" placement="end">
      <AlertCircle size={16} style={{ display: 'block', opacity: 0.5 }} />
    </Tooltip>
  );

  return <Input placeholder="Your email" rightSection={rightSection} />;
}

Sizes

Component has 5 premade sizes: xs, sm, md, lg, xl, use size prop to control input height, padding and font-size:

Custom component

As Input component is intended to be a base for all other inputs, you can pass component prop which will define root element:

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

function Demo() {
  return (
    <>
      <Input component="button">Button input</Input>

      <Input component="select" rightSection={<ChevronDownIcon />}>
        <option value="1">1</option>
        <option value="2">2</option>
      </Input>
    </>
  );
}

Headless variant

If you want to add your own styles to input it's better to start from scratch rather than overriding Mantine styles, use special headless variant which does not include any Mantine styles but still supports all other features: icon, right section, etc.:

import { Input } from '@mantine/core';
import { BrandTwitter } from 'tabler-icons-react';

function Demo() {
  return (
    <Input
      styles={{ input: { width: '100%', boxSizing: 'border-box' } }}
      icon={<BrandTwitter size={16} />}
      rightSection="$"
      variant="headless"
      placeholder="Add your own styles with styles API"
    />
  );
}

Get input ref

You can get input ref by passing ref prop to Input component:

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

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

Go back

ColorPicker – @mantine/core

Up next

InputWrapper – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter