[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]

Re: [Patternfly] How to indicate Optional form fields?



Hi Matt,

We actually liked the solution shown on the PatternFly blog, with the word "optional" overlayed over the right side of the form field in a de-emphasized gray font,  but we didn't know how exactly to implement it. I know I have implemented this look myself in the past on other sites, but we were hoping PatternFly had something built-in for this after seeing it on the blog.

https://blog.patternfly.org/required-fields/

Inline image 1


On Thu, Mar 2, 2017 at 9:45 AM, Matt Carrano <mcarrano redhat com> wrote:
Hi Jonathan,

Thanks for raising this issue.  As it so happens, I'm currently in the process of re-writing our forms guidelines on PatternFly and I agree that our current recommendations are somewhat incomplete.  I welcome any input or ideas you have and I also would be interested in seeing how others may have addressed this problem.

Thanks,

Matt

On Thu, Mar 2, 2017 at 5:48 AM, Andres Galante <agalante redhat com> wrote:
Hi Jonathan, I completely agree it seems silly to mark almost every line with the *.

Using "optional" as a placeholder brings some undesired side effects. for example, if a user wants to have a placeholder as a hint, then the optional will have a conflicts. Also if the input is complete the placeholder would disappear. Therefore we can't recommend using optional as a placeholder as a universal solution for patternfly.

Maybe we should revisit this recommendation and try to find a better solution for mostly mandatory fields.

Would you be able to work on it and propose a solution?

Thanks,

Andrés



On Wed, Mar 1, 2017 at 8:46 PM, Jonathan Yu <jawnsy redhat com> wrote:
Hey PatternFlyers!

We have a form that consists mostly of required fields, with a few optional fields.  It seems silly to mark all required fields with an asterisk (*) as it's 80%+ of the fields, but I can't figure out the correct style to get the behavior we want.

I was using <span class="text-muted">(Optional)</span> to indicate these fields, but the PatternFly Forms guidance recommends against it:

Required field: Required fields should be denoted with an * (asterisk) symbol.
Due to responsiveness issues, we do not recommend labeling optional fields with “(optional)”

See the Design tab of http://www.patternfly.org/pattern-library/forms-and-controls/forms/#/design (aside: why can't we link directly to the Design tab?)

I came across a blog, which recommends using something that looks somewhat like a placeholder: https://blog.patternfly.org/required-fields/ - Design A1, which is labelled as the Recommended way to do things. Does anyone know what CSS class I need for this? (the little "optional" text in the inputs there)



Currently we're using standard input placeholders, but I don't think this is the best use of them (they seem better used for syntax hints) - see the Middle Initial input:


​​
"Greeting" is also optional but I'm not sure the best way to indicate that?

--
Jonathan Yu / Software Engineer, OpenShift by Red Hat / 140-character rants 'n raves

“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.” — Samuel Beckett

_______________________________________________
Patternfly mailing list
Patternfly redhat com
https://www.redhat.com/mailman/listinfo/patternfly



_______________________________________________
Patternfly mailing list
Patternfly redhat com
https://www.redhat.com/mailman/listinfo/patternfly




--
Matt Carrano
Sr. Interaction Designer
Red Hat, Inc.
mcarrano redhat com


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]