This component will be removed soon.

Replaced by Form.Group

ValidationFormGroup

Leave feedback

Handles bootstrap style field validation and handles related aria attributes.

Manages the rendering of bootstrap-style:

Help text
Valid and invalid feedback

For children of type input, textarea, and select:

Appends bootstrap validation class names
Appends aria-describedby attributes (for help text and feedback)

basic usage

Show editable code example

Any Paragon component or export may be added to the code example.

<ValidationFormGroup
  for="firstName"
  helpText="This is your name."
>
  <label htmlFor="firstName">First Name</label>
  <Input
    type="text"
    id="firstName"
    name="first-name"
    value="Casey"
    onChange={() => {}}
  />
</ValidationFormGroup>

<ValidationFormGroup
  for="firstName"
  helpText="This is your name."
>
  <label htmlFor="firstName">First Name</label>
  <Input
    type="text"
    id="firstName"
    name="first-name"
    value="Casey"
    onChange={() => {}}
  />
</ValidationFormGroup>

invalid message

Show editable code example

Any Paragon component or export may be added to the code example.

<ValidationFormGroup
  for="firstName"
  invalid
  invalidMessage="Wrong!"
>
  <label htmlFor="firstName">First Name</label>
  <Input
    type="text"
    id="firstName"
    name="first-name"
    value="Casey"
    onChange={() => {}}
  />
</ValidationFormGroup>

<ValidationFormGroup
  for="firstName"
  invalid
  invalidMessage="Wrong!"
>
  <label htmlFor="firstName">First Name</label>
  <Input
    type="text"
    id="firstName"
    name="first-name"
    value="Casey"
    onChange={() => {}}
  />
</ValidationFormGroup>

valid message

Show editable code example

Any Paragon component or export may be added to the code example.

<ValidationFormGroup
  for="firstName"
  valid
  validMessage="What a nice name!"
>
  <label htmlFor="firstName">First Name</label>
  <Input
    type="text"
    id="firstName"
    name="first-name"
    value="Casey"
    onChange={() => {}}
  />
</ValidationFormGroup>

<ValidationFormGroup
  for="firstName"
  valid
  validMessage="What a nice name!"
>
  <label htmlFor="firstName">First Name</label>
  <Input
    type="text"
    id="firstName"
    name="first-name"
    value="Casey"
    onChange={() => {}}
  />
</ValidationFormGroup>

with any kind of input

Show editable code example

Any Paragon component or export may be added to the code example.

<>
<ValidationFormGroup
  for="weatherToday"
  helpText="Look out the window to see."
  valid
  validMessage="Correct!"
>
  <label htmlFor="weatherToday">How is the weather today?</label>
  <select
    className="form-control"
    id="weatherToday"
    name="weather"
    value="Sunny"
    onChange={() => {}}
  >
    <option>Sunny</option>
    <option>Cloudy</option>
    <option>Rainy</option>
    <option>Snowy</option>
  </select>
</ValidationFormGroup>
<ValidationFormGroup
  for="weatherTomorrow"
  helpText="Incoming weather."
  invalid
  invalidMessage="No good!"
>
  <Form.Control type='text' value='Cloudy' />
</ValidationFormGroup>
</>

<>
<ValidationFormGroup
  for="weatherToday"
  helpText="Look out the window to see."
  valid
  validMessage="Correct!"
>
  <label htmlFor="weatherToday">How is the weather today?</label>
  <select
    className="form-control"
    id="weatherToday"
    name="weather"
    value="Sunny"
    onChange={() => {}}
  >
    <option>Sunny</option>
    <option>Cloudy</option>
    <option>Rainy</option>
    <option>Snowy</option>
  </select>
</ValidationFormGroup>
<ValidationFormGroup
  for="weatherTomorrow"
  helpText="Incoming weather."
  invalid
  invalidMessage="No good!"
>
  <Form.Control type='text' value='Cloudy' />
</ValidationFormGroup>
</>

Props API#

ValidationFormGroup Props API

for string Required
Id of the form input that the validation is for
className string
Additional classnames for this component
invalid bool
Determines if invalid styles / message will be shown
valid bool
Determines if invalid styles / message will be shown
validMessage node
Message to display on valid input
invalidMessage node
Message to display on invalid input
helpText node
Help text for the form input
children node
Specifies contents of the component.

Usage Insights#