[Patternfly] How to indicate Optional form fields?

Andres Galante agalante at redhat.com
Thu Mar 2 10:48:12 UTC 2017


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/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 <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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/43c119aa/attachment.htm>
-------------- 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/43c119aa/attachment.png>
-------------- 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/43c119aa/attachment-0001.png>


More information about the PatternFly mailing list