UI Selector Ideas?
I am making these plus & minus selectors for a client, the image is from the Figma. I'm a bit stuck with how to best go about making them, specifically with the text/select options. For the Quantity, I can use a number input and have the buttons add or subtract vrom the value. But for the Grind Size and Bag Size I'd appreciate any ideas.
- Vanilla JS
- As a11y friendly as possible
Also, is there a UI term for this kind of component? I hit a dead end on google.
30 Replies
where's the code?
@ἔρως No code yet. I'm more looking for what the community thinks would be the best way to tackle this. A pseudo-code discussion.
https://discord.com/channels/436251713830125568/1232682796112416888/1232725046800289872 look at this post it may help you
@Mannix I like that, and that's what I've done on the quantity input. What makes that nice is there is a semantic html "number" input. But for options that are strings, what might be best?
Are you confused with the styling and functionality or only the functionality?
that's nearly impossible to respond then
@syntax Just the functionality
if you want the most accessible, a simple
<input> is the best@ἔρως Great, how would you set up a simple <input> to do behave like what is shown in the design?
you do nothing to do
if you want numbers, use the number input
if you want whatever the first thingy is, use a <select>
but those elements are ugly af
you can make them look like how you have it, but problem is: it tells us nothing about how accessible it is
it's pretty, but it's a jpeg
@ἔρως So the question is how to implement the ui and "a11y friendly as possible". I realize it wont be the most accessible, but we can still implement best practices.
yeah, but short of writting it all for you, it's impossible to answer
For all the icons(+, -) , use an onClick property to change the elements between them
@ἔρως You really like the word "impossible".
@syntax For what's in the middle, between the + and -, do you think re-styling some other input, like a radio or dropdown, or just having text?
i love the word
For the grand size: Store all the values you would like to change them to into an array. So when you click on the + icon allow it to increase the value +1 then pick the value in an array
A <p> element
don't use an array, use a pojo
@syntax That tracks. Just change the innerText according to the position on the array.
don't use a
<p>, since it has some meaning
use a spanYes
dont change innertext, use textcontent
You can use any element but it will depend on the styling <p> is a block element while <span> is an inline element
Anyone works
yes, but better to use an element with no semantic meaning than bashing an element with a specific meaning to work as you want
no, they do different things
innertext replaces everything inside the element, while textContent doesn't
@syntax Thanks for your constructive help.
that means, if you have a
<b>, innetText deletes it while textContent doesn'tI said both works, they are not the same
that depends on how it is implemented
Am glad I could help☺️
since we don't have code, it's an important thing to have into consideration
Yeah right