[Patternfly] How to indicate Optional form fields?
Jonathan Yu
jawnsy at redhat.com
Wed Mar 1 23:46:06 UTC 2017
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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170301/4835ab81/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/20170301/4835ab81/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/20170301/4835ab81/attachment-0001.png>
More information about the PatternFly
mailing list