Input
Use to collect data from users and confirm the validity, formatting or completeness of the data that they enter.
Description
The input component is composed of:
- A label that introduces what data is required to be entered by the user. The label is accompanied by visual helpers (icons) that are hidden by default. The icons become visible when the validation (positive/negative) of the labeled control occurs.
- An input field that may or may not include placeholder text to provide guidance on the type or formatting of data that is to be entered (the input can be of different types, e.g. email, password, checkbox, number etc.)
- A field status that indicates when there is a change in the field's status such as validation errors.
Input validation:
The input components inside .form-element__elements set the state class is-error or is-success on the form element (e.g. .form-element) and all children should react accordingly.
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-input;@include radius-component-form-element;@include radius-component-form-field-status;@include radius-component-form-label;Usage
Usage example
Variations
The variations are modifier classes that can be applied on the default element.
is-error
The class should be applied on the .form-element element if the input has an error. This status class is part of the negative validation and it is responsible for changing the visibility of the field status and changing the appearance of the whole input field and label.
is-success
The class should be applied on the .form-element element if the input is valid. This status class is part of the positive validation signaling that the information provided fulfilled field's requirements. It is responsible for changing the visibility of the icons that accompanies the input field.
disabled
This a standard html attribute for an input field. When disabled is added ot an input field it disallows the user from editing the field and adds custom styles to indicate that the field can not be edited.
Code example
<div class="form-element ">
<label for="input" class="form-label form-element__label">
<span>This is a label</span>
<svg class="svg-icon svg-icon--solid-error form-label__icon-error" aria-hidden="true">
<use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-solid"></use>
</svg>
<svg class="svg-icon svg-icon--solid-success form-label__icon-success" aria-hidden="true">
<use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#tick-circle-solid"></use>
</svg>
</label>
<div class="form-element__elements">
<div class="form-input form-input--icon">
<input type="text" class="form-input__element" id="input" placeholder="Placeholder">
<svg class="svg-icon form-input__icon" aria-labelledby="search-icon-title">
<title id="search-icon-title">Search icon</title>
<use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#search"></use>
</svg>
</div>
</div>
<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>
</div>