!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.
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.
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.
Icon and right section
Right section with Tooltip:
Component has 5 premade sizes: xs, sm, md, lg, xl, use
size prop to control input height, padding and font-size:
As Input component is intended to be a base for all other inputs,
you can pass
component prop which will define root element:
If you want to add your own styles to input it's better to start from scratch rather than overriding Mantine styles,
headless variant which does not include any Mantine styles but still supports all other features: icon, right section, etc.:
Get input ref
You can get input ref by passing
ref prop to Input component: