Silica Textfield label and placeholder

Design
#1

The Silica TextField both have an label and a placeholder, where the placeholder is the text shown in the text field when nothing has been entered yet (like “Password” in the password field in the image below) and a label, which is shown below the field when the text field isn’t empty (like “Username” in the username field in the image below). These can be set separately.

Image depicting a sample form and shameless self promotion for my application Sailfin, now available on OpenRepos!
Image depicting a sample form and shameless self promotion for my application Sailfin, now available on OpenRepos!1080×1920 944 KB

Now, my question is: is there any reason to set them to different values from a design perspective? Or leave one of those properties empty? Or is this some weird quirk that has been left in due to of fear of breaking backwards compatibility? The Silica Reference documentation seem to set them to the same values everytime and so do I. It’s simply an annoying thing to do, which made me hope that there might be something more behind, like a design decision.

#2

Sure. Place “e.g. mypersonalemail@mail.com” in the placeholder and leave label just “E-Mail address”

3 Likes
#3

As coderus wrote, back in the days when I wrote Sailfish apps I looked at it this way:

No, it’s not always necessary to have both. Yes, each of them has a distinct purpose. If you’re using the same string for both, either one of them is superfluous or you didn’t use it the right way. :slight_smile:

A description of the input field that should remain visible once text has been entered is a label.
The placeholder is an example.

There are situations in which both are useful (as in coderus’ email-example), others in which only one is necessary. Like in your password case I don’t think an example of a password would make sense (unless you need to point out certain requirements of a valid password). In a simple chat application, the input field for your answers might have no label (“Your answer” is really not necessary) but a placeholder (like the famous “Hello Susan!”) so the user will spot the field more easily when he first uses the app.
If a username is required, the label might be “Username” while the placeholder could clarify the format, if necessary. For example: Some systems have a domain part in the username, do I have to enter that, too? Or will it be taken from some other data in the setup?

3 Likes
#4

I don’t see a point in making the label invisible when no text has been entered yet, which is the behaviour of the TextField right now. If both were visible, I would’ve agree with you to use the placeholder for example input and the label for a description of what to input. But for some, in my eyes, silly reason, the label is hidden when the user needs it the most: when entering all fields for the first time!

So what field do you use to communicate what needs to be entered? Well, for me, and as far as I can tell also Jolla*, the most logical place would be the placeholder. But using the placeholder as label would defeat the intent of the placeholder!

An other option could be to use the placeholder to give both a description of the field and an example input, like “Server address (https://example.org)”. But that barely fits on a Xperia X screen, let alone the Jolla Phone’s screen!

So in short: for me personally, the label should always be visible if they want the placeholder to be used as a placeholder instead of a label. Otherwise they could make the label and the placeholder just as well the same thing.

* Examples of Jolla’s usage of using placeholders as labels can be found in, but are not limited to, the account section and when composing an email or message.

#5

The Silica TextField both have an label and a placeholder,
is there any reason to set them to different values from a design perspective?

We have had a design rule to keep the label and placeholder strings the same. For example if an empty field placeholder says “Password”, after inputing some text the label below the field also displays “Password”. There are currently a bit over 200 text fields in Sailfish OS in the platform side, and there have been just few exceptions to this rule.