InputWrapper

Enhance custom inputs with label, error and description
Import

Disclaimer

!important: Do not use InputWrapper with Mantine inputs, it is already included in most inputs:

// Incorrect usage, input is not accessible
<InputWrapper label="Input label">
<TextInput />
</InputWrapper>
// TextInput already includes InputWrapper
<TextInput label="Input label" description="Input description" />

Usage

InputWrapper is used to wrap for all Mantine inputs (Select, TextInput, Textarea and others). It includes label with optional required asterisk, description and error message.

All Mantine inputs support the same props as InputWrapper. You can combine it with Input component to build your own custom inputs with the same style and behavior.

Please enter your credit card information, we need some money
Your credit card expired
Size
xs
sm
md
lg
xl
<InputWrapper
id="input-demo"
required
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" />
</InputWrapper>

Change label element

Some inputs like RadioGroup may require to detach label from certain element. To implement this, use labelElement:

import { InputWrapper } from '@mantine/core';
// id is required to connect label and input
function WithLabel() {
return (
<InputWrapper id="with-label">
<input id="with-label" />
</InputWrapper>
);
}
// id is not required for div label as it is not connected to any element
function WithoutLabel() {
return (
<InputWrapper labelElement="div">
<input type="radio" name="radio" value="1" />
<input type="radio" name="radio" value="2" />
<input type="radio" name="radio" value="3" />
</InputWrapper>
);
}
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback