Must not be used on its own. Should be coupled with other form atoms inside a form-element component.
Form field status
Use to indicate the status of the form field it is paired with.
Description
The status of a form field refers to a validation state or a summary of field contents.
This is hidden by default. Should be displayed when an error occurs. It's only visible if the wrapping form element has the is-error class.
Activate Sass component
In order to have the styling of this component available, you need to include it in your project. After including the
Radius library in your main
./index.scss file, add this snippet:
@include radius-component-form-field-status;Usage
Usage example
Exercitation Lorem culpa consectetur minim sunt aliqua ad enim. Laboris duis qui deserunt aliquip cillum exercitation ullamco. Et Lorem tempor pariatur voluptate labore ipsum exercitation non qui sint voluptate laboris do. Eu cillum cupidatat eiusmod incididunt do nisi aute deserunt labore est aute qui cupidatat.
Code example
<div class="form-field-status">
<svg class="svg-icon form-field-status__icon" aria-hidden="true">
<use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#info-circle-outline"></use>
</svg>
<span class="form-field-status__copy">
Exercitation Lorem culpa consectetur minim sunt aliqua ad enim. Laboris duis qui deserunt aliquip cillum exercitation ullamco. Et Lorem tempor pariatur voluptate labore ipsum exercitation non qui sint voluptate laboris do. Eu cillum cupidatat eiusmod incididunt do nisi aute deserunt labore est aute qui cupidatat.
</span>
</div>