Input design method
Hey, if you had an input design like the example in the image, would this be the sort of way you'd go about it, or is there an easier/more semantic solution? Perhaps anything unecessary i've included?
https://codepen.io/deerCabin/pen/NWZKoyy
I'd appreciate any tips, thanks in advance.
19 Replies
Seems spot on to me. Maybe a regex to limit it to numbers though since it's a text input, but that's probably be done using Javascript since it's not something involving a form submit
ah awesome, oh totally forgot to add that in haha. Thank you
it's been a while since i've seen you around here 😅
Haha it has indeed been a while 😂. I like to disappear off the face of the earth for a couple months every now and then. Been very busy with work so now that I have a little more downtime I figured I'd start getting back into it!
Haha always good to take a break sometimes, sounds like a good plan
I am assuming that a width in cm would be a number. For that, I would set type="number" and also inputmode="decimal".
just a couple months ago i came across inputmode='numeric'; i didnt realize there were more like 'decimal'. sounds like we can also set a type="number" on that input? i was assuming it was one or the other type=number or inputmode=numeric. exciting to know about 'decimal' , thank you!
EDIT: more information for anyone interested...
inputmode doesn't change how the browser interprets the input; it only suggests which keyboard to display.
Using inputmode="numeric" can be more versatile than type="number" for certain use cases, as it allows the use of maxlength, minlength, and pattern attributes.There is many things that can be improved about it, it's depends on how far you would like to go. But for the bare minimum I'll recomend you to make input size equal to wrapper size, so when you focus you don't have that double border effect.
The input is already at width:100% . the focus state has to do with the default outline on the the input and moving the focus ring to the wrapper when it
:has(:focus-within) Look carefully, input-group have a padding that prevent input from taking all the width
Yes it has padding but you said to have the input take full width which it does (as much as it can when it has to share with the “cm”), sans padding.
We are talking about two approaches:
1. leave the padding and remove the default focus outline on the input but add it back with
.input-group:has(:focus-within)
2. remove the padding on the parent and give it to the input which means when input has focus, the result is an outline around the input , making a border bw it and the “cm” piece plus the border around the whole input-group.
So if your gripe is a double border , it would look the same as it does now but without the padding on the parent, input taking width 100% - “cm” element and defining the height but there will still be a double border.
I may be misunderstanding though, how does removing the padding negate the double border ? There will still be an outline on the input, creating a line in bw input and “cm” and also a border wrapping the whole row.I missed that author need to include "cm" text, 100% input width does not work here then.
Make input take as much space as possible so it will be easier to click on it, remove
input border and use .input-group border to indicate focus state using :focus-within selector.
But for something more reliable and reusable, you should change you class names/css selectors to something more isolated. And you can also make it as web components if you want to easy reuse it and at the same time keep it in vanilla ecosystem (example - https://codepen.io/The-Tirius/pen/ExBYzRq) or better use a proper js framework.For everyone mentioning input-mode and type, I appreciate the knowledge shared, thank you
And for everyone noticing and mentioning the border and outline issue, thank you as well. However I think js seems a bit overkill for something like this right?
what do you recommend for making the
input take up as much space to make it easier to click on? You mentioned making it take full width, and there has to be padding to make the contents not touch the border right?Like in example from codepen
Ah okay I’ll take a look, thanks
What JS are you referring to ?
The whole web component thing
Oh I missed that. Yeah you probably don’t need to use this repeatedly so it likely doesn’t need to be a web component . But either way it’s your project so only you can know that.
As far as padding goes you could take it off the parent wrapper and give the padding to the input and cm element if you wanted but I’ve also found that putting a gap to the row in this situation or using padding inline end on the input takes up realestate that’s important when the screen shrinks and you don’t want the input values to disappear. The cm element will take the same height as the input since you don’t have an alignment property so by default it stretches but if this row were ever to wrap , it won’t take the same height.
To show you what I mean put a long line of text into the input and then shrink the screen way down and you’ll see how it gets cut off
ah so i gather if you click on the padding of an input it still classes on you clicking the input rather than nothing happening because you've clicked the padding of the parent, i see now.
In terms of the gap, wouldn't you need that so it looks cleaner rather than a long number butting up against the cm element? And by cutting off, if you mean what's in the image, isn't that what's supposed to happen when there's a lot of text in there?
