FieldWithAffirmationMark

This component provides a positive feedback to the user when the value of the input field is valid. To compose your custom input field with the valid mark wrap it with FieldWithAffirmationMark:

<FieldWithAffirmationMark shouldShowAffirmationMark>
  <input name="field" />
</FieldWithAffirmationMark>

Grouped Labelled Radio and Checkbox

To not break the styling of the grouped labelled components such as GroupedLabelledRadio and GroupedLabelledCheckbox set thee property isGrouped to true.

<RadioGroup>
  <FieldWithAffirmationMark isGrouped shouldShowAffirmationMark>
    <GroupedLabelledRadio name="fruits" label="Apple" value="apple" checked />
  </FieldWithAffirmationMark>
  <FieldWithAffirmationMark isGrouped>
    <GroupedLabelledRadio name="fruits" label="Pineapple" value="pineapple" />
  </FieldWithAffirmationMark>
</RadioGroup>

Props