v1.0

Input Text

A un-styled text input that can be nested within any framer component to create a text input.

Why use this prefab?

Framer's provided default input component has limited customization options. Unlike other input solutions this particular input component stands out by offering exceptional flexibility. It is designed without any pre-set styles, thereby giving users complete autonomy over the design of the input fields

Why use this prefab?

Framer's provided default input component has limited customization options. Unlike other input solutions this particular input component stands out by offering exceptional flexibility. It is designed without any pre-set styles, thereby giving users complete autonomy over the design of the input fields

Why use this prefab?

Framer's provided default input component has limited customization options. Unlike other input solutions this particular input component stands out by offering exceptional flexibility. It is designed without any pre-set styles, thereby giving users complete autonomy over the design of the input fields

Features

Features

Features

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.

How to use

How to use

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 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.

Accessbility considerations

Accessbility considerations

Accessbility considerations

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.

Properties

Properties

Properties

Property

Default

Description

ID

String

The value that will populate the html id attribute.

Name*

String

A name is needed in a form to correctly transmit data upon submission.

Form ID

String

Allows you to associate this input with the form prefab.

Required

Boolean

When a part of a form will require the user to check before submitting.

Placeholder

String

The placeholder text for the input.

Input Type

Enum

Sets type to Text, Email, or URL

Disabled

Enum

If the text input is disabled

Aria Describedby

String

The id of the optional helper text prefab.

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