v3.6.14
Discord
Source code

InputWrapper

Enhance custom inputs with label, error and description
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>
  );
}
Go back
Input – @mantine/core
Up next
JsonInput – @mantine/core
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
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
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter