0

I'm working on a small UI to manage a few attributes to style lines in SVG sketches. One of them is stroke-dasharray.

stroke-dasharray defines the pattern of dashes and gaps used to paint a dashed line. Currently users enter the pattern as a list of numbers in a text input field, i.e. "1,4,1,2" which translates to "1 point dash, 4 points gap, 1 point dash, 2 points gap" and then repeats.

I wonder if there is a better UI solution in order to enter a list of numeric values.

Improve this question
2
  • Are you sure you need to use numeric values to create your dashed line? That sounds like the clunkiest part. How many options do you really need for dashed lines? How about a dropdown or other selector showing example dashed lines, and just let the user pick one? Or just let the user type in the dashes and dots for the pattern.
    – Dan Hanson
    Commented Aug 11, 2022 at 21:57
  • @DanHanson I ended up using a combination of custom styles + a variable stack of sliders. If you are curious about my solution you can see it live at repsketch.com, just clone a design, make a simple path vector, then click on stroke settings and play with "style" and "custom pattern".
    – Miki
    Commented Aug 11, 2022 at 23:52

1 Answer 1

Reset to default
0

As you think about number inputs, consider designing an input field with a number keypad.

You might also consider that the user can manually tap the number using keyboard.

It's like when you enter a confirmation code in a mobile app.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.