Input

The input component is an enhanced form input wrapper from Framer forms. It adds extra functionality such as labels, help text, and icon support.

Features

Design

Variants

Dark Mode

Please enter your email address

Choose your start date

label (String): The text label displayed above the input field.
placeholder (String): The placeholder text for the input field.
helpText (String): Additional help text displayed below the input field to guide the user.
icon (ComponentInstance): An icon to be displayed inside the input field, which can provide additional context or functionality.
inputType (Enum): The type of the input field, such as text, email, etc.
value (String): The current value of the input field.
required (Boolean): Makes the input value required.

Label: Ensure the label property provides a clear indication of the input field's purpose.
Placeholder: Use the placeholder property to provide hints about the expected input format.
Help Text: The helpText can guide users on how to fill out the input correctly.
Icons: The icon property can be used to incorporate icons that improve the user experience, such as indicating required fields, email formats, or password visibility toggles.
Input Types: Utilize the inputType property to ensure proper input behavior (e.g., password for masked input, email for email validation).