Input

Base component to create custom inputs

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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. See guide on inputs to learn how to build custom inputs with this component.

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.

<Input placeholder="Default variant" />
<Input variant="filled" placeholder="Filled variant" />
<Input variant="unstyled" placeholder="Unstyled variant" />

Icon and right section

You can add icon on the left side of the input, for example:

radix icons (used in mantine packages)
feather
react-icons

new

<Input
  icon={<TwitterLogoIcon />}
  placeholder="Your twitter"
  rightSectionWidth={70}
  rightSectionProps={{ style: { pointerEvents: 'none' } }}
  rightSection={rightSection}
/>

Right section allows you to place anything on the right side of the input. For example, in PasswordInput component right section is used for show/hide password toggle:

Or you can add keyboard shortcut like in search on Mantine docs website:

Ctrl+K

import React from 'react';
import { Kbd, TextInput, useMantineTheme } from '@mantine/core';
import { MagnifyingGlassIcon } from '@modulz/radix-icons';

function Demo() {
  const theme = useMantineTheme();

  const rightSection = (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Kbd>Ctrl</Kbd>
      <span style={{ margin: '0 5px' }}>+</span>
      <Kbd>K</Kbd>
    </div>
  );

  return (
    <TextInput
      placeholder="Search"
      icon={<MagnifyingGlassIcon />}
      rightSectionWidth={90}
      rightSection={rightSection}
      rightSectionProps={{ style: { pointerEvents: 'none' } }}
      variant={theme.colorScheme === 'dark' ? 'filled' : 'default'}
    />
  );
}

Right section with Tooltip:

import React from 'react';
import { Input, Tooltip } from '@mantine/core';
import { InfoCircledIcon } from '@modulz/radix-icons';

function Demo() {
  const rightSection = (
    <Tooltip
      label="We do not send spam"
      position="top"
      placement="end"
      withArrow
    >
      <InfoCircledIcon />
    </Tooltip>
  );

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

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:

<Input component="button">Button input</Input>

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

Get element ref

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

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

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

TypeScript

You need to pass additional types to use custom component with TypeScript in case you need full type coverage for events and elementRef:

<Input<'button', HTMLButtonElement>
  component="button"
  onClick={(event) => console.log(event)}
  elementRef={(node) => {
    window.myRef = node;
  }}
/>

<Input<typeof YourTextarea, HTMLTextareaElement>
  component={YourTextarea}
  onClick={(event) => console.log(event)}
  elementRef={(node) => {
    window.myRef = node;
  }}
/>