v1.0
Input Text
A un-styled text input that can be nested within any framer component to create a text input.
Uses framer events for transitions between variants
Use any framer component all styling done within framer canvas not in the code or sidebar.
Applies all accessible aria attributes to ensure everyone can interact with it.
Uses native HTML Form attribute to use within any form.
Create a framer component: Using framer create a component that will use this prefab.
Add prefab: Add the prefab to the component and connect the transitions to the matching variants states.
Nest prefab: Nest the prefab to the parent frame.
Setting Validation: (Optional) Inputs support validation. You can set any of the validation options or use matches to match any regex in the array.
Test: Test the component in preview and ensure that your transitions are working.
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 creating your component that will use this prefab ensure that there is sufficient contrast between the different states. Read more about required contrast to pass AA WCAG requirements
This prefab should be paired with a label. Use our label prefab to ensure that the prefab is clearly labeled and described to all users. When nesting a label within the input you are designing be sure to set pointer-events to none to avoid any conflicts with interactions.
When using within a form be sure to include an error variant to ensure that when required the user is aware.
Property
Description
ID
The value that will populate the html id attribute.
Name*
A name is needed in a form to correctly transmit data upon submission.
Form ID
Allows you to associate this input with the form prefab.
Required
When a part of a form will require the user to check before submitting.
Placeholder
The placeholder text for the input.
Input Type
Sets type to Text, Email, or URL
Disabled
If the text input is disabled
Aria Describedby
The id of the optional helper text prefab.
Validation
Sets the validation for the input. For more detail on validation look at validator js documentation.
Styles
Contains style properties for the prefab for text and placeholder.
Events
Supported events: Default, Default-hasValue, Focus, Focus-hasValue, Error, Error-hasValue, Success, Success-hasValue