import { InputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.Input);
!important: In most cases, you should not use Input
in your application.
Input
is a base for other inputs and was not designed to be used directly.
Use Input
to create custom inputs, for other cases prefer TextInput
or other component.
import { Input, TextInput } from '@mantine/core';
// Incorrect usage, input is not accessible
function Incorrect() {
return (
<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
function Correct() {
return (
<TextInput label="Input label" description="Input description" />
);
}
Input
component is used as base for some other inputs (NativeSelect, TextInput, Textarea, etc.).
The purpose of the Input
is to provide shared styles and features to other inputs.
Input is a polymorphic component, the default root element is input
,
but it can be changed to any other element or component.
Example of using Input
as button
and select
:
Example of using react-imask with Input
:
Input.Wrapper
component is used in all other inputs
(TextInput, NativeSelect, Textarea, 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.
inputWrapperOrder
allows configuring the order of Input.Wrapper
parts.
It accepts an array of four elements: label
, input
, error
and description
.
Note that it is not required to include all of them, you can use only those that you need
– parts that are not included will not be rendered.
With inputContainer
prop, you can enhance inputs that use Input.Wrapper
under the hood,
for example, you can add Tooltip to the TextInput when
the input is focused:
All components that are based on Input.Wrapper
support required
and withAsterisk
props.
When set to true, both of these props will add a 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 />;
}
All inputs that use Input.Wrapper
under the hood support error
prop.
When set to true
, it will add a red border to the input. You can also pass a React node to display
an error message below the input. To only display error message without a red border, set error
prop
to React node and withErrorStyles={false}
:
Input.Label
, Input.Error
and Input.Description
components can be used to create custom
form layouts if the default Input.Wrapper
layout does not meet your requirements.
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:
You can add default props on theme
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, NativeSelect, Textarea, etc.):
Same as with default props, you can use Input
and Input.Wrapper
Styles API
on theme to add styles to all inputs:
Use &:focus-within
selector to change inputs focus styles. You can apply these styles to
one component with classNames
prop or to all inputs with Styles API
on theme.
InputBase
component combines Input
and Input.Wrapper
components and supports component
prop:
Input
and Input.Wrapper
components support Styles API –
you can customize styles of any inner element with classNames
and styles
props.
Input
Styles API selectors:
Input.Wrapper
Styles API selectors:
If you use Input
component without associated label element, set aria-label
:
import { Input } from '@mantine/core';
// ok – the input is labelled by the aria-label
function WithAriaLabel() {
return <Input aria-label="Your email" />;
}
// ok – the input is labelled by the label element
function WithLabel() {
return (
<>
<label htmlFor="my-email">Your email</label>
<Input id="my-email" />
</>
);
}
When you use Input
with Input.Wrapper
it is required to set id
on both components
to connect label and other elements with the input:
import { Input } from '@mantine/core';
function Demo() {
return (
<Input.Wrapper label="Your email" id="your-email">
<Input id="your-email" />
</Input.Wrapper>
);
}
You can use use-id to generate unique ids:
import { Input } from '@mantine/core';
import { useId } from '@mantine/hooks';
function Demo() {
const id = useId();
return (
<Input.Wrapper label="Your email" id={id}>
<Input id={id} />
</Input.Wrapper>
);
}