InputWrapper

Enhance custom inputs with label, error and description

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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.

See guide on inputs to learn how to build custom inputs with this component.

Credit card information *

Please enter your credit card information, we need some money

Your credit card expired

Required

Label

Description

Error

<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 React from 'react';
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>
  );
}