Questions tagged [input-fields]
Input fields are several different controls such as textboxes, dropdown lists and radio buttons who reside in a (web) form.
658 questions
0
votes
1
answer
58
views
Why do most address input fields in applications have fixed widths/heights instead of expanding to show the entire address?
I've noticed that in many applications, the address input fields (or search bars) have a fixed width and height, which means long addresses often require horizontal scrolling. For example:
In Google ...
0
votes
1
answer
29
views
Input field in form with two different workflows
We have a form that user needs to input manually(at least for now).
Currently, we have an input field for users to type.
As we are planning to implement gen AI feature in our product,
we want to use ...
- 1
1
vote
1
answer
39
views
Form question with optional and mandatory text fields
This question on my registration form is currently shown as options in a dropdown. We are now having to include optional and required text fields based off the selected answer. Will a dropdown still ...
- 11
1
vote
0
answers
34
views
Search history - clear / disable [closed]
In relation to a retail website search bar. Is it necessary to have the option to disable search history if there's an option to clear it?
- 11
1
vote
1
answer
43
views
Multiple select fields
I am trying to allow users to select something that has two names (one numerical and one text):
Reference number
Name
Reference number is required when adding but the name is an optional additional ...
2
votes
1
answer
55
views
In an input field how to decide the input field and its label positions?
I have seen input fields that vary in terms of how they are designed.
Label on the top and text are at the bottom.
How is this decided? And can it vary in different places in the same application and ...
- 1,543
0
votes
1
answer
101
views
UI Design for dynamically manage multiple groups of form elements
I'm developing a user interface where users need to dynamically manage multiple groups of form elements. These groups may vary in content and quantity. What user interface guidelines and patterns ...
- 1
0
votes
2
answers
133
views
Non-text Contrast (Level AA) with input field background against a web page background
I have a question regarding the accessibility of this design and whether it complies with WCAG guidelines and success criteria. Below is an image of a set of input fields on a specific background:
...
- 13
0
votes
1
answer
53
views
Search with multiple inputs (checkboxes) [duplicate]
For a new design I'm creating a search where people can generate a report for companies (see image). The parent companies can have a lot of child companies. It is based on the blazer component ...
1
vote
1
answer
129
views
What are the best practices for determining appropriate input fields for a form by gathering the context only from the backend developer?
I'm currently tasked with designing a user form for a data solution product, but facing a bit of challenges. I do have a basic knowledge of the products' goals but haven't been provided with clear and ...
- 89
0
votes
1
answer
98
views
What's the best way to organize the content on this page? How do I place the different kinds of inputs and read-only values since there's so many
I'm redesigning a web form that users can use to create water compliance tests. The issue I'm running into is that there's a lot of information - both inputs and read-only fields that are derived from ...
0
votes
1
answer
174
views
Should search fields be placed inside the container (combo box) or inside the dropdown list?
When the user has to select from many options in a dropdown menu, a search field where the user may input text that filters the options can help find the desired option. There are two UI elements that ...
- 105
0
votes
1
answer
409
views
Form validation question where if you click in a required field but leave it without typing it displays an error
This is a form on a webpage with about 8 text fields. I am curious has anyone seen this pattern which I am thinking of using. The submit button on the form is disabled. If the user clicks in a ...
- 71
0
votes
3
answers
49
views
What's the best way to design an input that allows users to fill in exact answers but also estimated ones?
For example, for a date field, users need to be able to input an exact date, but also must be able to input an estimated date (eg. " around 2024", "around Jan or Feb of 2024") if ...
1
vote
1
answer
114
views
I'm creating a detailed component spec for an input field in iOS and I don't know exactly how to specify certain accessibility details
I'm building a detailed accessibility spec for an iOS input field component for a design system. I want to outline in the spec how voiceover should work.
The design system needs an input field that ...
- 11
1
vote
1
answer
73
views
Change search icon to clear input as user types?
We use the search icon more as visual indicator than actionable item. When the user types it changes to clear input icon. Has anyone seen this as a pattern before? I feel it does it's job.
- 71
1
vote
1
answer
112
views
How to design an input for a number which has to be divisible by 5?
Initially I thought this to be a trivial task, but all the solutions I came up with have severe drawbacks.
The application I write is connected to machinery and all the inputs are evaluated as soon as ...
- 2,895
1
vote
2
answers
152
views
When my page has multiple input forms with a range of options from 2 - 10, should i use dropdowns, segmented control, or a mix of both?
I have a form where the user select multiple different inputs. One input might have only 2 options (parent,child), while the next input might have 5 options (age: 0, 1-18, 18-25, 25-55, 55+), etc. ...
- 1,334
2
votes
1
answer
97
views
Hiding the delete button behind 1, possibly 2 clicks
I have to anonymize this substantially, so forgive the abstraction, but here is the debate.
There is an interface in which you can create an object. This object has several attributes, as well as sub-...
- 1,326
2
votes
2
answers
85
views
Element for the age of cheese
I am creating an app using React and antd where users must enter information about cheese. I need an element to ask the user how aged their cheese is. The following options are possible:
[0-12] ...
- 21
3
votes
1
answer
320
views
Optimal Placement of Copy/Paste Buttons for Enhanced UX: Inside or Outside the Input Box?
I'm currently grappling with a design decision and would love to gather some collective wisdom on the matter. The question at hand is about the placement of copy/paste buttons in relation to an input ...
- 1,448
2
votes
1
answer
116
views
Multi-level configuration editor
Background
I have limited experience in GUI design, but I have to produce a desktop application (Qt) meant for expert users (our own staff mostly). Its purpose is to read/write a large set of ...
- 23
1
vote
3
answers
123
views
Redesigning our searchbar
Our users are having trouble with our search bar. They don't realize they need to click the search icon to start searching. To make it clearer, I've come up with three solutions:
A. Replace the icon ...
- 111
1
vote
0
answers
74
views
How to put 3 inputs and 1 selector in 3 columns grid [closed]
I need an outside perspective) The hanging “Mode Tunnel” selector is very annoying. Are there any options for configuring this differently so that it doesn’t hang like that?
- 131
1
vote
2
answers
60
views
Handling and parsing string with multiple elements to the form using one input
We have a problem that we want to solve in the most intuitive way.
There is a modal with one text input, but the requirements are for user to be able to put one OR multiple email in it. This is needed ...
- 11
1
vote
1
answer
49
views
How do I make sure that the user enters their input fields correctly?
I have two input fields which need to be formatted a certain way. Ipv4 addresses need to have the "." to separate the numbers and ipv6 addresses need to have ":". I'm not sure what ...
- 1,334
3
votes
1
answer
2k
views
Blinking cursor on input fields and blinking time/timeout
What about the blinking time?
Should it blink eternally until the user interacts?
I see that on Firefox 117, the blink stops after some seconds whereas it doesn't on chromium browsers.
Is the timeout ...
- 309
1
vote
5
answers
107
views
Is it good UX to provide an example of the correct input if the user entered a wrong amount?
if the user entered an amount less that the money he has in his wallet,can I say you don't have enough money try x$ or it's a bad user experience?
2
votes
1
answer
757
views
Best way to indicate required vs optional fields
I'm having some issues deciding how to indicate to users the some fields are required and some are optional. I've encountered these three scenarios, and the following solutions:
All fields are ...
- 149
1
vote
1
answer
71
views
How can i logically combine filters for organization, domain and country?
I'm working on a web app containing a lot of datatables with some well known filters on each page, all of them pertaining to a specific domain (or website):
A domain may or may not have an ...
- 111
0
votes
2
answers
85
views
Adding Custom Form Field
I have a tricky thing to solve. This would be used for fast food menu.
First field is pretty much Name of the Group ex "Choose the sauce" and other 2 fields (and 2 fields should aways exist ...
- 61
0
votes
2
answers
445
views
What are the expected behavior and characteristics of a currency input?
I'm trying to make a list of the expected behavior and characteristics of a user textbox when it is designed for currency or money input.
Characteristics:
Numeric only.
With two decimal places.
With ...
- 101
2
votes
2
answers
374
views
CTA is being hidden by keyboard on long form in mobile
While working on long forms on mobiles, such as multiple business expenses, the CTA to finalise adding is getting hidden by the keyboard. The common way of putting one input field and one cta may not ...
- 336
2
votes
1
answer
248
views
(WCAG 1.4.11) Understanding 'subsuming' in Non-text Contrast AA Level
In a vaccuuum I understand how to interpret the criterion.
If a border is the only way to identify a control then Border vs container must have >3 contrast.
If a background is the only way to ...
1
vote
4
answers
121
views
Using a single text field with auto type detection in an app
So we want to increase the number of accepted fields in our app of which people use as identifier to transfer to. We currently have mobile number and email , however we intend to increase to add ...
- 11
0
votes
2
answers
536
views
Which label option for a range slider offers a better experience?
The aim is to offer an input using a bandwidth range-like slider field, that can make the selected option clear.
Option A: only show the selected option, to encourage the user to use the input and ...
- 1
0
votes
1
answer
56
views
How to visually connect a numeric input and a table dynamically updating with the input?
What I am building: a search engine for gaming laptops. The #1 factor for gamers is, obviously, gaming performance, which is mostly judged by FPS – frame rate that a laptop runs a game on. Higher is ...
- 101
0
votes
1
answer
112
views
How to name an option in settings that allows free input in a list (select)
In the settings of a web application, admins can select "custom fields" of different types: number, selector, multi-select, etc.
We added an option that allow user (not admin) to type their ...
- 113
1
vote
1
answer
95
views
What's the best input/edit method to handle small high precision numbers?
I have an AG Grid with cells that contain very small highly precise numbers - eg 0.002957399184
I want to allow users to edit these numbers easily and accurately - basically want to avoid fiddling ...
- 11
1
vote
1
answer
1k
views
What is the best pattern for text field hints in a web form?
I always wonder what is the best practice for labels/hints of text fields on a web form.
Here is my understanding:
It is better to use a label than a hint when the form has more than 2 fields... but ...
- 11
1
vote
3
answers
126
views
Two data types in one login field
I have a couple of ways of logging into a specific service: either by ID number or email address.
The designs so far have been built on the assumption these will be two separate fields, but how might ...
- 111
10
votes
1
answer
3k
views
Should selected options be removed from single- and multi-select dropdown lists?
In our application we're working with dropdown lists that may contain many options (sometimes around 200). Usually, these lists allow the user to select multiple entries whereas in other places of our ...
- 105
22
votes
3
answers
9k
views
Is password-unmasking worth the potential security downside?
I work on the iOS implementation of a mobile application where the (cross platform) design guide specifies an unmasking-control for password fields. I am primarily an iOS+Mac user, so this concept was ...
- 323
3
votes
2
answers
3k
views
Should 'Other' be a text field or a radio button plus text field
Hi! There's a discussion around whether 'Other' should be a radio button at the end of these options, where an input field then allows you to type in the company formation type.
The first few radio ...
- 33
0
votes
2
answers
956
views
How do you define input length?
I'm working on an online banking website and its design system.
UI designers tend to want all form input elements to be the same size so that everything is perfectly aligned. I've explained that the ...
- 697
0
votes
1
answer
873
views
How to write an accessible error message for a required radio button group form element?
I have a radio button group as follows:
"Do you have any pets?"
Radio options:
"yes" or "no"
If an option is not selected, and the user submits the form, then an error ...
0
votes
1
answer
2k
views
Should clicking outside a textfield hide the software (IME) keyboard?
I am developing an Android (Jetpack Compose) app and have observed that when a textfield gains focus, a software (IME) keyboard opens, and remains open even after I click outside the field.
This is ...
- 111
0
votes
2
answers
81
views
Varying number of categories and subcategories based on options selected
Designing a form where the user needs to select 3-4 levels of categorization. for this, I'm looking at using 4 horizontal combo boxes (refer image below).
Depending on what the user selects in box A, ...
- 10.8k
1
vote
1
answer
1k
views
How to improve UX on deeply nested form functionality in the browser?
I have this, which is horribly unstyled but shows the inputs and grouping (which is also described in terms of the HTML structure in more depth here).
Basically, you have a form for a "...
- 523
1
vote
3
answers
293
views
On/off functionality inside a dropdown?
I am working on a feature where the user can start a video recording of a YouTube live-stream. The feature is per default disabled. A required input for the recording to work is to select which stream ...
- 432