FormGroup
The FormGroup is a component that displays a label and an error message for a form input.
Version 1.2.3
StorybookInstallation
To install @igloo-ui/form-group in your project, you will need to run the following command using npm:
npm install @igloo-ui/form-group
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/form-group
Usage
Then to use the component in your code just import it!
import FormGroup from '@igloo-ui/form-group';
import Input from '@igloo-ui/input';
<FormGroup label="Name" message="This field is required" showMessage>
<Input type="text" placeholder="John Doe" error />
</FormGroup>;
API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The form element that needs an error and/or a label. |
className | string | - | Add a className for the form group div |
dataTest | string | - | Add a data-test tag for automated tests |
message | ReactNode | - | Add a message below the form element |
messageType | MessageType | Specifies the type of message to display | |
htmlFor | string | - | Add the htmlFor attribute to the label of the form element |
label | ReactNode | - | Add label text above the form element |
showMessage | boolean | - | Decides when to show the message |