v1.0
Helper Text
A text that appears near a input to help users understand input requirements.
Accessbile helper text for form inputs.
Use any framer component all styling done within framer canvas not in the code or sidebar.
Sets the correct aria-live type depending if it is a error text or hint.
Use for any input or prefab we provide.
Use any of input prefab: Use any of the provided framer prefab input/controls provided that have the attribute for aria-describedby to correctly associate the helper text id to that input.
Add prefab: Add the prefab to the input/control prefab and set the id of the helper text and the input/control aria-describedby to be the same.
Done: That is it! You are all set to use this prefab.
When creating the component that will be used with this prefab consider the following:
When using helper text ensure to only show the text when the text has relevant hint or error message. Having a empty aria-describedby creates errors for screen readers.
If the helper text is an error be sure to use type of error as it will set the correct aria-live to assertive where screen readers will be aware of the message instantly.
Property
Description
ID
The id of the prefab and will be referenced by other inputs for the aria-describedby attribute value.
Text
The text of the label.
Styles
Sets the styles of the text.