Input
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.
<Inputicon={<MailIcon />}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.
<Input variant="default" 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
<Inputicon={<TwitterLogoIcon />}placeholder="Your twitter"rightSection={rightSection}rightSectionWidth={70}styles={{ rightSection: { pointerEvents: 'none' } }}/>
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:
import React from 'react';import { Kbd, TextInput } from '@mantine/core';import { MagnifyingGlassIcon } from '@modulz/radix-icons';function Demo() {const rightSection = (<div style={{ display: 'flex', alignItems: 'center' }}><Kbd>Ctrl</Kbd><span style={{ margin: '0 5px' }}>+</span><Kbd>K</Kbd></div>);return (<TextInputplaceholder="Search"icon={<MagnifyingGlassIcon />}rightSectionWidth={90}rightSection={rightSection}styles={{ rightSection: { pointerEvents: 'none' } }}/>);}
Right section with Tooltip:
import React from 'react';import { Input, Tooltip } from '@mantine/core';import { InfoCircledIcon } from '@modulz/radix-icons';function Demo() {const rightSection = (<Tooltiplabel="We do not send spam"position="top"placement="end"withArrow><InfoCircledIcon /></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:
<Input size="xl" placeholder="xl input size" />
You can get predefined input heights by importing INPUT_SIZES:
import { INPUT_SIZES } from '@mantine/core';
| Size | Input height |
|---|---|
| xs | 30px |
| sm | 36px |
| md | 42px |
| lg | 50px |
| xl | 60px |
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>
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.:
<Inputvariant="headless"placeholder="Add your own styles with styles API"icon={<TwitterLogoIcon />}rightSection="$"styles={{input: {width: '100%',boxSizing: 'border-box',}}}/>
Get element ref
You can get input ref by passing elementRef prop to Input component:
import { 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;}}/>