InputWrapper
Enhance custom inputs with label, error and description
Import
Source
Docs
Package
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
<InputWrapperid="input-demo"requiredlabel="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 inputfunction 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 elementfunction 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>);}
Built by Vitaly Rtishchev and these awesome people