Inputpolymorphic

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
<Input.Wrapper label="Input label">
  <Input />
</Input.Wrapper>

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

Usage

Input component is used as base for some other inputs (Select, TextInput, Textarea, etc.). The purpose of Input is to provide shared styles and features to other inputs:

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

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

Icon and right section

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

function Demo() {
  return (
    <Input
      icon={<IconBrandTwitter size="1rem" />}
      placeholder="Your twitter"
      rightSection={
        <Tooltip label="This is public" position="top-end" withArrow>
          <div>
            <IconAlertCircle size="1rem" style={{ display: 'block', opacity: 0.5 }} />
          </div>
        </Tooltip>
      }
    />
  );
}

Custom component

Input is a polymorphic component, you can change the root element with component prop:

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

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

      <Input component="select" rightSection={<IconChevronDown size={14} stroke={1.5} />}>
        <option value="1">1</option>
        <option value="2">2</option>
      </Input>
    </>
  );
}

You can use Input and Input.Wrapper components to build custom inputs with third-party libraries, example with react-imask:

Your phone

import { Input } from '@mantine/core';
import { useId } from '@mantine/hooks';
import { IMaskInput } from 'react-imask';

function Demo() {
  const id = useId();
  return (
    <Input.Wrapper id={id} label="Your phone" required maw={320} mx="auto">
      <Input<any>
        component={IMaskInput}
        mask="+7 (000) 000-00-00"
        id={id}
        placeholder="Your phone"
      />
    </Input.Wrapper>
  );
}

Input.Wrapper component is used in all other inputs (TextInput, Autocomplete, MultiSelect, etc.) under the hood, you do not need to wrap your inputs with it, as it is already included in all of them. Use Input.Wrapper only when you want to create custom inputs.

Credit card information

Please enter your credit card information, we need some money

Your credit card expired

With asterisk

Label

Description

Error

Size

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

function Demo() {
  return (
    <Input.Wrapper
      id="input-demo"
      withAsterisk
      label="Credit card information"
      description="Please enter your credit card information, we need some money"
      error="Your credit card expired"
    >
      <Input id="input-demo" placeholder="Your email" />
    </Input.Wrapper>
  );
}

inputContainer

With inputContainer prop you can enhance inputs that use Input.Wrapper under the hood, for example, you can add Tooltip to TextInput when the input is focused:

TextInput with tooltip

Tooltip will be relative to the input

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

function Demo() {
  const [focused, setFocused] = useState(false);

  return (
    <TextInput
      label="TextInput with tooltip"
      description="Tooltip will be relative to the input"
      placeholder="Focus me to see tooltip"
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      inputContainer={(children) => (
        <Tooltip label="Additional information" position="top-start" opened={focused}>
          {children}
        </Tooltip>
      )}
    />
  );
}

inputWrapperOrder

inputWrapperOrder prop allows to define the order of Input.Wrapper parts:

Custom layout

Description below the input

Custom layout

Error and description are

both below the input

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

function Demo() {
  return (
    <>
      <TextInput
        label="Custom layout"
        placeholder="Custom layout"
        description="Description below the input"
        inputWrapperOrder={['label', 'error', 'input', 'description']}
      />
      <TextInput
        mt="xl"
        label="Custom layout"
        placeholder="Custom layout"
        description="Error and description are"
        error="both below the input"
        inputWrapperOrder={['label', 'input', 'description', 'error']}
      />
    </>
  );
}

required and withAsterisk props

All components that are based on Input.Wrapper support required and withAsterisk props. When set to true, both of these props will add red asterisk to the end of the label. The only difference is whether input element will have required attribute, example with TextInput component:

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

// Will display required asterisk and add `required` attribute to the input element
function RequiredDemo() {
  return <TextInput label="test-label" required />;
}

// Will only display the asterisk, `required` attribute is not added to the input element
function AsteriskDemo() {
  return <TextInput label="test-label" withAsterisk />;
}

Input.Label, Input.Error and Input.Description

Input.Label, Input.Error and Input.Description components can be used to create custom form layouts if default Input.Wrapper layout does not fit your requirements.

Input label

Input description

Input error

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

function Demo() {
  return (
    <>
      <Input.Label required>Input label</Input.Label>
      <Input.Description>Input description</Input.Description>
      <Input.Error>Input error</Input.Error>
    </>
  );
}

InputBase component

InputBase component combines Input and Input.Wrapper components and supports component prop:

Your phone

Custom native select

import { InputBase } from '@mantine/core';
import { IMaskInput } from 'react-imask';

function Demo() {
  return (
    <Box maw={320} mx="auto">
    <InputBase label="Your phone" component={IMaskInput} mask="+7 (000) 000-0000" />
      <InputBase label="Custom native select" component="select" mt="md">
        <option value="react">React</option>
        <option value="react">Angular</option>
        <option value="svelte">Svelte</option>
      </InputBase>
    </Box>
  );
}

Input.Placeholder

Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

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

function Demo() {
  return (
    <Input component="button">
      <Input.Placeholder>Placeholder content</Input.Placeholder>
    </Input>
  );
}

Input base button with placeholder

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

function Demo() {
  return (
    <InputBase component="button" label="Input base button with placeholder">
      <Input.Placeholder>Placeholder content</Input.Placeholder>
    </InputBase>
  );
}

Default props on MantineProvider

You can add default props on MantineProvider to Input and Input.Wrapper components. These default props will be inherited by all inputs that use Input and Input.Wrapper under the hood (TextInput, Autocomplete, MultiSelect, etc.):

TextInput with custom layout

Description below the input

NumberInput with custom layout

Description below the input

MultiSelect with custom layout

Description below the input

import { TextInput, MultiSelect, NumberInput, MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          InputWrapper: {
            defaultProps: {
              inputWrapperOrder: ['label', 'error', 'input', 'description'],
            },
          },

          Input: {
            defaultProps: {
              variant: 'filled',
            },
          },
        },
      }}
    >
      <TextInput
        label="TextInput with custom layout"
        placeholder="TextInput with custom layout"
        description="Description below the input"
      />
      <NumberInput
        mt="xl"
        label="NumberInput with custom layout"
        placeholder="NumberInput with custom layout"
        description="Description below the input"
      />
      <MultiSelect
        mt="xl"
        data={['Is not that', 'awesome?']}
        label="MultiSelect with custom layout"
        placeholder="MultiSelect with custom layout"
        description="Description below the input"
      />
    </MantineProvider>
  );
}

Styles on MantineProvider

Same as with default props you can use Input and Input.Wrapper Styles API on MantineProvider to add styles to all Inputs:

TextInput with custom styles

Description below the input

NumberInput with custom styles

Description below the input

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

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        components: {
          InputWrapper: {
            styles: (theme) => ({
              label: {
                backgroundColor:
                  theme.colorScheme === 'dark' ? 'rgba(255, 255, 255, .1)' : 'rgba(0, 0, 0, .1)',
              },
            }),
          },

          Input: {
            styles: (theme) => ({
              input: { borderColor: theme.colors.violet[theme.fn.primaryShade()] },
            }),
          },
        },
      }}
    >
      <TextInput
        label="TextInput with custom styles"
        placeholder="TextInput with custom styles"
        description="Description below the input"
      />
      <NumberInput
        mt="xl"
        label="NumberInput with custom styles"
        placeholder="NumberInput with custom styles"
        description="Description below the input"
      />
    </MantineProvider>
  );
}

Customize focus styles

Input component is used as a base for other inputs (PasswordInput, Select, MultiSelect, etc.). To customize focus styles of any inputs that are built on top of the Input component, use &:focus-within selector instead of &:focus:

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

function Demo() {
  return (
    <Input
      placeholder="Input with custom focus styles"
      styles={(theme) => ({
        input: {
          '&:focus-within': {
            borderColor: theme.colors.orange[7],
          },
        },
      })}
    />
  );
}

Get input ref

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

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

Go back

FileInput – @mantine/core

Up next

JsonInput – @mantine/core

Input component props

Name	Type	Description
disabled	boolean	Disabled input state
error	ReactNode	Determines whether input has error styles
icon	ReactNode	Adds icon on the left side of input
iconWidth	Width<string \| number>	Width of icon section
multiline	boolean	Will input have multiple lines?
pointer	boolean	Determines whether cursor on input should be pointer
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
required	boolean	Sets required on input element
rightSection	ReactNode	Right section of input, similar to icon but on the right
rightSectionProps	Record<string, any>	Props spread to rightSection div element
rightSectionWidth	Width<string \| number>	Width of right section, is used to calculate input padding-right
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Input size
variant	Variants<"unstyled" \| "default" \| "filled">	Defines input appearance, defaults to default in light color scheme and filled in dark
wrapperProps	Record<string, any>	Properties spread to root element

Input.Wrapper component props

Name	Type	Description
children^*	ReactNode	Input that should be wrapped
description	ReactNode	Input description, displayed after label
descriptionProps	Record<string, any>	Props spread to description element
error	ReactNode	Displays error message after input
errorProps	Record<string, any>	Props spread to error element
id	string	htmlFor label prop
inputContainer	(children: ReactNode) => ReactNode	Input container component, defaults to React.Fragment
inputWrapperOrder	("input" \| "label" \| "error" \| "description")[]	Controls order of the Input.Wrapper elements
label	ReactNode	Input label, displayed before input
labelElement	"div" \| "label"	Render label as label with htmlFor or as div
labelProps	Record<string, any>	Props spread to label element
required	boolean	Adds required attribute to the input and red asterisk on the right side of label
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Controls all elements font-size
withAsterisk	boolean	Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input

Input.Label component props

Name	Type	Description
children	ReactNode	Label content
labelElement	"div" \| "label"	Label root element
required	boolean	Determines whether required asterisk should be displayed
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Predefined label size

Input.Description component props

Name	Type	Description
children	ReactNode	Description content
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Predefined size

Input.Error component props

Name	Type	Description
children	ReactNode	Error content
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Predefined size

Input component Styles API

Name	Static selector	Description
wrapper	.mantine-Input-wrapper	Root Input element
icon	.mantine-Input-icon	Input icon wrapper on the left side of the input, controlled by icon prop
input	.mantine-Input-input	Main input element
rightSection	.mantine-Input-rightSection	Input right section, controlled by rightSection prop

Input.Wrapper component Styles API

Name	Static selector	Description
root	.mantine-Input.Wrapper-root	Root element
label	.mantine-Input.Wrapper-label	Label element styles, defined by label prop
error	.mantine-Input.Wrapper-error	Error element styles, defined by error prop
description	.mantine-Input.Wrapper-description	Description element styles, defined by description prop
required	.mantine-Input.Wrapper-required	Required asterisk element styles, defined by required prop

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine 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