Control
The Control component provides a way to leverage the same Clarity Form layout(s) and behaviors and integrate a custom or third party input control.
Third party library's and custom form control components are often created to fulfill application specific requirements. It should be used when mixing Clarity and non-Clarity form controls.
Use the label to benefit screen readers which will read the label aloud when a user focuses on the label element. Use of a label also increases the clickable area when it is a clickable input such as a radio, checkbox or toggle input.
The input is the element a user will interact with.
A Helper message is optional text that will inform the user when they interact with the input.
An error message is optional text that will inform the user when there is a problem with the input.
A success message is optional text that will infrom the user when all is well with the input.
There are multiple states a form control can be in. All form controls have at least one of these four states. Some controls have additional states
The default state exists before a user interacts with the control.
The disabled state exists when the user must be prevented from interacting with the control.
The error state exists after a user interacts with the control. It could occur after the user input is checked by an external service and found invalid.
The success state exists after a user interacts with the control. It could occur after the user input is checked by an external service and found to be valid.
Form controls can have three layouts. Horizontal, vertical and Compact. Horizontal is also the default if nothing is specified.
In a horizontal layout, the lable and input are on the same line and any supplementary text (info, error or success) are below the input. Use a horizontal layout when there is ample horizontal space for the form control(s).
In a vertical layout the label is above the input and the supplemntary text (info, error or success) is below the input. Use a vertical layout when the form width is narrow.
A compact layout the label, input and supplemntarty text (info, error or success) are all on one line.