v4.2.12

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
import { InputWrapper, Input } from '@mantine/core';


function Demo() {
  return (
    <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
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter