Required MDC Textfield without label

Bugs|Feature Requests

I’m undecided between bug and feature request: basically is a different behavior compared to MDL (and its “rules and principles”). I looked for a previous discussion without results.

What MDC-Web Version are you using?

0.9.1

What browser(s) is this bug affecting?

All, latest versions

What OS are you using?

Windows 10 (64 bit)

What are the steps to reproduce the bug?

Every MDC Textfields, with a required input, but without a mdc-textfield__label within the mdc-textfield (eg. mdc-textfield--fullwidth) are not marked in any way, so users cannot distinguish mandatory and not. In MDL, as you can see at the following jsfiddle, required fields have the bottom-border set to $mdc-textfield-error-on-light (or dark).

Actual MDL behavior (with and without label)

Tha main difference is that MDL uses a <label> tag as watermark, instead MDC uses the placeholder attribute, so actual CSS rule (that add an “*” after the label content)

.mdc-textfield__input:required + .mdc-textfield__label::after {
  margin-left: 1px;
  content: "*";

  .mdc-textfield--focused & {
    color: $mdc-textfield-error-on-light;
  }

  @include mdc-theme-dark(".mdc-textfield") {
    .mdc-textfield--focused & {
      color: $mdc-textfield-error-on-dark;
    }
  }
}

doesn’t works.

I understand that without a CSS parent selector is really difficult to replicate MDL behavior, unless using javascript (my actual workaround). Waiting for a decent performance, fully supported :has() selector, a way could be to add an “*” after the placeholder content to identify required fields, but access the placeholder requires polyfills.

So I don’t know =/

What is the expected behavior?

Required fields (without a mdc-textfield__label within the mdc-textfield) should have the bottom-border set to $mdc-textfield-error-on-light (or dark).

What is the actual behavior?

Required fields (without a mdc-textfield__label within the mdc-textfield) aren’t marked in any way.

Any other information you believe would be useful?

[traviskaufman]

If I understand your issue correctly, it seems like you’re saying that there’s no way to explicitly tell when a label-less text field (e.g. a full-width text field) is required. I’ll follow up with design and see if I can get some clarification there, then we can discuss next steps.

[abhiomkar]

This is already implemented. See https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield#text-field-without-label for details.