How can I imitate the look of the outline and label from Material-UI's outlined textfield?

Question

I\'m trying to imitate the outlined textfield from Material-UI but I don\'t know how to hide the border behind the title text.

In the below image, notice how the \"D

Answer 1

The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks

1. SVG Element

Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.

The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.

2. Plain old border with a background on the label

This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.

3. Fieldset and legend

This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.

Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!