Form control - Input (max length)

[sudhashrestha]

Description

Create the input component as shown in the video attached below. The input has a custom cursor that fills up wrt. the length of the input, up to the max length specified. The input shows a checkmark once the limit is hit, then takes no further input after that.

Animation Preview

• Screenshot/Video:

Form.control.-.Input.max.length.mov

Note

Please refer to the Animata contributing guidelines available here for rules on how to contribute to the project. Let us know in the comments if you’re working on this issue, and feel free to ask any questions!

Requirements

• Create a new animated component that matches the provided design.
• Add example usage of the component in the documentation or storybook.

Guidelines & Best Practices

• Write reusable and clean code following the project’s style guide.
• The component should be fully customizable. The user should be able to modify props such as duration, easing, color, and size where applicable.
• Follow the Contributing Guidelines before submitting your pull request.

Important

To ensure more contributors have the opportunity to participate, we kindly request that:

• Each contributor submits only one pull request related to this issue.
• If you're interested in working on this issue, first check if it has already been claimed. If not, assign yourself to the issue and move it to In Progress on the project board.

Additional resources

Posted on X by: https://x.com/pacocoursey/status/1696389547696009554

---

Checklist

• I have read and followed the contributing guidelines.
• I have developed the component according to the requirements.
• I have tested the component across different browsers and screen sizes.
• I have documented the component for future reference.
• I have submitted a pull request with appropriate labels and referenced this issue number.

[pavithrakumar22]

hey @sudhashrestha can u assign me this issue #225 i am interested to work on this issue and make my first open source contribution

[realvishalrana]

@sudhashrestha can assign me Form control - Input (max length) issue.

[sudhashrestha]

Done @pavithrakumar22

[sudhashrestha]

@realvishalrana Please check the other tickets. We are prioritizing assignments on first come first serve basis.

[RajVerma97]

can you assign me this form control component?

[sudhashrestha]

@RajVerma97

It is already assigned to @pavithrakumar22

[sudhashrestha]

Hi @pavithrakumar22

I hope you're doing well! Since it's been a while since this issue was assigned, I wanted to check in and see if you're still planning to work on it. If so, could you kindly share an update by tomorrow?

If I don't hear back by then, I’ll unassign the issue to allow others to take it up.

Thanks for your understanding!

[pavithrakumar22]

Hi @pavithrakumar22

I hope you're doing well! Since it's been a while since this issue was assigned, I wanted to check in and see if you're still planning to work on it. If so, could you kindly share an update by tomorrow?

If I don't hear back by then, I’ll unassign the issue to allow others to take it up.

Thanks for your understanding!

Sorry I am very busy right now so I won't be able to continue so unassign me

[sudhashrestha]

@pavithrakumar22 Thanks for letting me know! I've unassigned you from the issue. I appreciate your interest and hope you'll be able to contribute in the future.

[naaa760]

Hello @sudhashrestha :)
I want to work on this issue!

[sudhashrestha]

Hi @naaa760 I've assigned you #330. Please complete that before I assign this to you. Thanks.

[PentesterPriyanshu]

@sudhashrestha please assign this to me or i can directly put pr