Prefabs

Primitives

Library

Learn

Get full access

Prefabs

Copy Prefab

Copy Sample

Input text

An unstyled html input that unlocks that ability to build forms natively within framer.

Why use this prefab?

Framer's default settings restrict input element customization, applying predefined properties and styles. The solution is the prefab feature, allowing for custom component design with enhanced control. It facilitates transitions between components via specific input events, offering greater flexibility and interactivity in UI design.

Why use this prefab?

Framer's default settings restrict input element customization, applying predefined properties and styles. The solution is the prefab feature, allowing for custom component design with enhanced control. It facilitates transitions between components via specific input events, offering greater flexibility and interactivity in UI design.

Why use this prefab?

Framer's default settings restrict input element customization, applying predefined properties and styles. The solution is the prefab feature, allowing for custom component design with enhanced control. It facilitates transitions between components via specific input events, offering greater flexibility and interactivity in UI design.

Features

Features

Features

Uses framer events for transitions between variants

Styling of the input container is done on the framer canvas not in the side bar.

Uses the correct HTML syntax and type to ensure forms are handle properly.

Uses native HTML Form attribute to use within any form.

How to use

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 prefab to the parent frame.

Adding a clear button: (Optional) To add a clear button for the input any layer or component to the parent frame with the following accessibility tools added. aria-label="clear" and tag to be a button.

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.

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)

Disabled

Boolean

Sets the input to disabled.

Validation

Enum

Sets the validation for the input. For more detail on validation look at validator js documentation.

Styles

Object

Contains style properties for the prefab for text and placeholder.

Events

Interactions

Supported events: Default, Default-hasValue, Focus, Focus-hasValue, Error, Error-hasValue, Success, Success-hasValue