Table of contents
Background effect for Discord ad

Join our Discord server!

Leverage Once UI's full potential and discuss design system topics in our growing community

Once UI for Figma - Join our Discord community Join now!
chevron_left Back

Designing the perfect input field + πŸ’₯ Figma freebie!

Author avatar
Lorant Toth | Design & Development
7 months ago


Input fields are essential components of any user interface, serving as gateways to unlock the true potential of user interactions. Although they might not be as visually striking as other components, such as cards or image sliders, input fields are, in fact, one of the most complex and crucial elements to perfect. Mastering the design of these fields can significantly enhance user experience, ensuring seamless and effective interaction between users and digital platforms.

At first glance, you might question why we're focusing on input fields instead of the more aesthetically appealing components. While cards or sliders are visually engaging, they are relatively straightforward and less challenging in terms of design intricacies. Rest assured, we will dive into the creation of these components as well in future discussions.

As a bonus, read till the end to access a free Figma resource of a well-designed input field to inspire your projects. Let's get started on this journey to elevate your input field design skills!

What is a text input field?

A text input field, represented as the <input> HTML element, is a fundamental component in web interfaces that allows users to enter and edit text-based information. By default, the type attribute is set to text, but variations like email and password can be specified for specific use cases. Each input type may have custom properties, such as masking the characters in a password field for added security.

Image of the plain HTML <input> element
The basic HTML input element, while functional, falls short of meeting the demands of today's sophisticated user experience expectations

Text input fields have different states based on user interaction:

  • Default
    The standard state when the input field is displayed
  • Hover
    The state when the user's cursor hovers over the input field
  • Focus
    The state when the input field is clicked or selected by the user
  • Disabled
    The state when the input field is inactive, preventing user input

These states can be customized using CSS pseudo-selectors and JavaScript events targeting state changes, such as the @blur event when the input field loses focus.

In modern web interfaces, it's essential to provide more detailed and versatile solutions for various use cases than what the native input element can offer. To achieve this, it's recommended to create a custom text input component using a JavaScript framework like React, Vue, or Angular. This approach allows for added customizations, improved error handling, enhanced styling, and micro-interactions that aren't available with the default HTML element.

By understanding the different states and customizations available for text input fields, we can start exploring the best practices and design approaches to create an exceptional input component.

Customizing the styles

When customizing the style of an input field, it's essential to consider the different use cases and contexts it will be used in. For instance, a standalone search input in a header requires different customizations compared to a standard input within a form. In the former example, a placeholder is more suitable than a label to save space, while a form input usually requires a label to inform users about the input's purpose, preventing errors when filled.

Input variations: Standard form input and search input
Standard input with floating label and search input with placeholder by Google

To accommodate various requirements, it's recommended to create a versatile input component that allows for diverse customization options. This ensures a feature-rich input that can be easily tweaked or updated in one place for all elements on your website.


Begin by setting a padding, border-radius, and border-color to enhance the input's appearance. Add a box-shadow for the focus state, as well as a grey background and a slightly lighter shade of grey for the disabled state.

Input with simple customization
A simple input component with some additional CSS customization


Creating size parameters for input fields, such as S, M, and L, can be an effective way to indicate hierarchy and suggest the appearance of the content after it's saved. This approach is particularly useful in forms where different input fields hold varying levels of importance or serve distinct purposes.

For example, when creating a blog post, you could use an L-sized input for the title, an M-sized input for the summary, and an S-sized input for the content textarea. This visual hierarchy would then be mirrored in the final post, with the title appearing as a heading, the summary as a subheading, and the content as the body text.

An input component with adjustable size
An input component with adjustable size

By incorporating size parameters in your input component, you can enhance the user experience by providing clearer visual cues and better reflecting the intended structure of the content.

In addition to size parameters, it's crucial to make the input field fluid so it takes up the remaining space. In CSS, you can achieve this by setting the input width to 100%, and in Figma, you can use the fill-container option. This way, when you set the width of a form, the input field will automatically adjust to fit the available space.

It's recommended to set the font-size of the input value to a minimum of 16 pixels to avoid unwanted automatic zoom effects on mobile devices when the input is focused.


Height is a critical factor when designing input fields, particularly in lengthy forms with multiple inputs. Oversized input fields can consume valuable space and make a form appear daunting. One solution to reduce input height is using a floating label. By customizing the <label> property with an absolute position that translates along the Y-axis upon focus and slightly scales down, you can incorporate the label within the input field itself. However, this approach has some trade-offs: the label may be smaller than the WCAG recommendation in the focused state, and using input placeholders is not advised. In most cases, these issues can be resolved by adding helper text above or below the input field.

Input with standard label vs. floating label
Input with standard label vs. floating label

It's essential to consider your target audience and their abilities when making these design choices, ensuring a user-friendly experience for all users.

Extra functionalities

Enhancing input fields with additional functionalities can significantly improve usability by incorporating conditionally rendered graphic elements, texts, icons, and more.


Adding optional icons to the left and right sides of the input field, referred to as prefix and suffix icons, can serve various purposes.

  • Prefix Icon
    This icon provides visual context for the input field, making it easier for users to understand its purpose and reducing cognitive load. For instance, an email field could feature a mail icon, creating a clear association between the icon and the input's function.
  • Suffix Icon
    This icon typically offers additional functionality related to the input field. A common example is the eye icon in a password field, which can be used to toggle the visibility of the entered password.
Prefix- and suffix on the Input field
Prefix- and suffix icon properties

Incorporating prefix and suffix icons in your input component not only enhances its appearance but also contributes to a more intuitive and user-friendly experience.

Help patterns

Adding extra elements to provide contextual help is a crucial aspect of input field design. In some cases, you may need to explain why certain data is being requested or demonstrate the correct format for the value being asked for. Incorporating optional descriptions or tooltips in your input field can significantly enhance the user experience.

Here are a few ways to include help patterns in your input fields:

  • Description
    Add an optional description below the input field to provide additional information about the data being requested or the required format.
  • Popover
    Display a popover next to or above the input field with relevant information when the input is in focus. This can be especially useful when you want to provide help without cluttering the interface.
  • Help icon
    Place a help icon next to the input field or label that, when hovered over, displays a popover containing additional information or guidance.
Various help patterns for the input
Various help patterns for the input

The best approach depends on your design preferences and the specific use case. Regardless of the method you choose, incorporating help patterns in your input fields will contribute to a more intuitive and user-friendly experience.

Error handling

While browsers can validate some common input errors based on the input type, there are inconsistencies in how different browsers handle these validations. Moreover, you may require more specific validation rules, such as checking whether an email address already exists in your database. To ensure better usability and provide a consistent experience across all browsers, it's crucial to account for all possible scenarios and create a custom validation system.

  • Custom validation
    Implement custom validation rules in your input component to handle both browser-based validations and more specific requirements, such as checking for duplicate email addresses in your database.
  • Consistent appearance
    Design a consistent error display system that works across all browsers. This can include error messages, visual cues like border colors, and icons indicating an error state.
  • Real-time validation
    Where appropriate, consider providing real-time validation feedback as the user enters data, so they can correct errors immediately. This can improve the overall user experience and minimize potential frustration.
  • Accessibility
    Ensure your error handling system is accessible to all users, including those who rely on screen readers or other assistive technologies. Properly structured error messages and use of ARIA attributes can help make your input fields more accessible.
Error handling for the input
Error handling for the input

Creating the component in Figma

Figma is indeed an excellent tool for component selection within a variant based on properties and bulk layer selection among components inside a variant. However, using a _base component has its advantages, especially when it comes to reusing it in other components that require similar formatting to the input, such as textarea and select elements. This approach allows for easy modification of spacings, paddings, and layouts for all derivatives of the input at once, which aligns with the principles of Once UI.

Base components

Using an underscore in the name of the _base components serves an important purpose in Figma. It prevents these components from being published along with the rest of the components in the library. Since _base components are primarily used as building blocks for other components and not meant to be used directly in design files, this naming convention helps keep your library organized and prevents accidental use of _base components in your designs. This approach ensures that only the intended, higher-level components are available for use, maintaining consistency and efficiency across your design system.

To achieve this, we will create several wrapper components that enable different styles for various states (e.g., error) and allow for toggling extra elements like descriptions.

By the end of this process, our input component will have the following properties:

  • Label
    Text property
  • Filled
    Boolean property
  • Value (When Filled is true)
    Text property
  • States
    Variant with values for Default, Hover, Focus, Disabled, Error
  • ErrorText (When variant is Error)
    Text property
  • Prefix
    Boolean property
  • PrefixIcon (When Prefix is true)
    Instance swap property
  • Suffix
    Boolean property
  • SuffixIcon (When Suffix is true)
    Instance swap property
  • Description
    Boolean property
  • DescriptionText (When Description is true)
    Text property
Custom properties of the Once UI input field
At first glance, Once UI components may appear deceptively simple, but as you begin to customize them, their true versatility and rich capabilities are revealed

This comprehensive set of properties ensures that our input component is versatile, adaptable, and reusable across a range of contexts, ultimately contributing to a more consistent and efficient design system. Furthermore, these properties enable customization at the mt-32evel component, eliminating the need to find and select individual layers. This streamlined approach simplifies the design process, making it easier to modify and adapt the input component to fit various use cases and maintain consistency across your entire project.

Exposing nested instances

When using a _base component, it's essential to expose the nested instance within the Input variant. Until this is done, you won't be able to access the properties managed at the _base component's level, such as the Prefix, Suffix, Label, Value, and Description.


With all the variants defined, it's time to set up interactions to make all instances interactive by default. This process enhances the user experience by simulating how the input component will function in a real-world scenario.

Here's how to set up the interactions:

  • On the Default variant, create a hover interaction using Smart Animate to transition to the Hover variant.
  • Next, on the Hover variant, create a click interaction using Smart Animate to transition to the Filled Focus variant.
  • Finally, create a click interaction on the Filled Focus variant using Smart Animate to transition to the Filled Default variant.

By setting up these interactions, your input component will provide a more realistic and engaging experience, allowing you to better understand and fine-tune its behavior before incorporating it into your design project. This interactive prototype will be invaluable for user testing, as it enables you to gather feedback and identify potential usability issues early in the design process. Moreover, it facilitates a smoother developer handoff by providing a clear demonstration of how the input component should function and interact with user input. In this way, you can ensure that your design intentions are effectively communicated and accurately implemented.


It's important to note that the input component created in Figma will not fully replicate a real input field, as it can only display the value you set on the instance and won't be able to accept actual user input. Additionally, Figma is unable to handle events like @blur, which occurs when the input loses focus. To work around this limitation, we use a click interaction on the input component, which is the closest approximation we can achieve at the moment.

πŸ’₯ Figma freebie

Having explored the process of creating the best input component, it's time to share the freebie: the original Once UI Input, complete with interactions, states, and free documentation. This meticulously crafted input component stands out for its excellence, boasting a significantly smaller footprint than input components found in other UI kits and design systems.

Interactive prototype of examples demonstrating the use cases of Once UI's Input component
Image caption of Download the free resource from the Figma community

Download the free resource from the Figma community



In this article, we've delved into the complexities of designing the best input component, covering various approaches and aspects to consider in the process. We've highlighted the importance of accommodating different use cases, customizing styles, providing extra functionalities, and addressing error handling and help patterns. We also discussed the benefits of using a base component in Figma, prototyping interactions, and working within the limitations of the tool.

As you can see, designing an input component requires considering numerous aspects, and it's just one of several essential interactive elements that modern user interfaces demand. The real challenge lies not in styling but in setting up the structure, properties, and documentation. The good news is that the styles are easily adjustable.

So, why spend time designing all these components from scratch when you can take advantage of Once UI? This comprehensive toolkit tackles the daunting tasks for you, allowing you to focus on the exciting aspects of your design project. Get started with the Once UI Design System for Figma and elevate your design game today!

Promo image for Once UI design system

The $900,000 design system mistake you can’t afford to make

A staggering 90% of startups fail. We're exposing the secret mistake that can doom your business for good.

Once UI for Figma - design framework for prototyping on Product Hunt

Updates from the creators

Stay in the loop with our weekly newsletter

Β© 2023 Once UI - All rights reserved.

Once UI is an independent framework and is not affiliated with, endorsed, or sponsored by Figma or any of its subsidiaries.