[Patternfly] How to indicate Optional form fields?

[Jake Lucky]

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/

[image: Inline image 1]

Jacob Lucky
jlucky at redhat.com

On Thu, Mar 2, 2017 at 9:45 AM, Matt Carrano <mcarrano at 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 at 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 at 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/patt
>>> ern-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/re
>>> quired-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 <https://twitter.com/jawnsy>
>>>
>>> *“Ever tried. Ever failed. No matter. Try again. Fail again. Fail
>>> better.”* — Samuel Beckett
>>>
>>> _______________________________________________
>>> Patternfly mailing list
>>> Patternfly at redhat.com
>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>
>>>
>>
>> _______________________________________________
>> Patternfly mailing list
>> Patternfly at redhat.com
>> https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
>
>
> --
> Matt Carrano
> Sr. Interaction Designer
> Red Hat, Inc.
> mcarrano at redhat.com
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/871ebb45/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screenshot from 2017-03-01 15-15-09.png
Type: image/png
Size: 47491 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/871ebb45/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Optional-Design.png
Type: image/png
Size: 15817 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/871ebb45/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 17542 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/871ebb45/attachment-0002.png>