Form
A form is a container for different types of input elements.
Why use this prefab?
Framer lacks native support for creating form elements directly. However, this prefab enables the ability to associated controls and input elements to a form using HTML form attribute. It manages form actions like submit and reset, and communicates events to components for styling updates and validation.
Why use this prefab?
Framer lacks native support for creating form elements directly. However, this prefab enables the ability to associated controls and input elements to a form using HTML form attribute. It manages form actions like submit and reset, and communicates events to components for styling updates and validation.
Why use this prefab?
Framer lacks native support for creating form elements directly. However, this prefab enables the ability to associated controls and input elements to a form using HTML form attribute. It manages form actions like submit and reset, and communicates events to components for styling updates and validation.
Features
Features
Features
How to use
Create a framer component: The component requires you have the following variants named "default" "default-hasValue" "focus" "focus-hasValue" "error" and "error-hasValue", and "disabled" (case-sensitive).
Create a framer component: The component requires you have the following variants named "default" "default-hasValue" "focus" "focus-hasValue" "error" and "error-hasValue", and "disabled" (case-sensitive).
Create a framer component: The component requires you have the following variants named "default" "default-hasValue" "focus" "focus-hasValue" "error" and "error-hasValue", and "disabled" (case-sensitive).
Nest Prefab: Within the component nest input prefab to ensure that the user will be able to interact with it. For best results have the prefab fill the entire component. Utilize the padding to the exact placement.
Nest Prefab: Within the component nest input prefab to ensure that the user will be able to interact with it. For best results have the prefab fill the entire component. Utilize the padding to the exact placement.
Nest Prefab: Within the component nest input prefab to ensure that the user will be able to interact with it. For best results have the prefab fill the entire component. Utilize the padding to the exact placement.
Set transitions Selecting the nested prefab set the transitions to the correct variants. For example "focus-hasValue" should transition to "focus-hasValue"
Set transitions Selecting the nested prefab set the transitions to the correct variants. For example "focus-hasValue" should transition to "focus-hasValue"
Set transitions Selecting the nested prefab set the transitions to the correct variants. For example "focus-hasValue" should transition to "focus-hasValue"
Test: Be sure to test and ensure that the input is functioning properly. If you are using a form test validation by setting test property to true and inputing a value.
Test: Be sure to test and ensure that the input is functioning properly. If you are using a form test validation by setting test property to true and inputing a value.
Test: Be sure to test and ensure that the input is functioning properly. If you are using a form test validation by setting test property to true and inputing a value.
Using in a form: When using in a form you must assign the formID to match the form it will be associated within.
Using in a form: When using in a form you must assign the formID to match the form it will be associated within.
Using in a form: When using in a form you must assign the formID to match the form it will be associated within.
Set Tab index -1
Set the tabIndex of connected components to -1. This improves navigation for screen readers and keyboard users by avoiding unintended focus. By default framer sets all components to have tabIndex to 0.
Set Tab index -1
Set the tabIndex of connected components to -1. This improves navigation for screen readers and keyboard users by avoiding unintended focus. By default framer sets all components to have tabIndex to 0.
Set Tab index -1
Set the tabIndex of connected components to -1. This improves navigation for screen readers and keyboard users by avoiding unintended focus. By default framer sets all components to have tabIndex to 0.
Component properties
Property
Default
Description
id
String
The unique id for the input.
Name*
String
Name of form field
Required
Boolean
When used in a form requires users to fill out.
Placeholder
String
Sets the string of the placeholder of the input.
Padding
Fused number
Sets the padding of the input prefab.
Padding
Fused number
Sets the padding of the input prefab.
Input type
Enum
Sets the type for Input (Text, Email or Phone)
Validation
Enum
Sets the validation for the input.
Styles
Object
Contains style properties for the prefab.