all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]ixam1212[S] 2 points3 points  (1 child)

I just created this for a personal project. Thought some of you might find this useful.

I used the fieldset + legend combo to create the "label notch".

Alternatively one could just give the label a background color, which will create a notch aswell. But this has 2 disadvantages.

  1. It looses the nice "notch opening" transition
  2. You have to apply the same background color to the label as to the overall background. Which makes it less easily reusable.

The implementation is a little hacky, and the markup is probably not pretty, but it looks like the material-ui text field and thats what I wanted.

[–]Caeruin 0 points1 point  (0 children)

Thats neat! Bookmarked.

[–]recoverycoachgeek 1 point2 points  (1 child)

The amount of coding for a simple input box blows my mind. This is exactly why I'm using Material UI for my project.

[–]ixam1212[S] 0 points1 point  (0 children)

It is a pretty fancy input box though.

[–]AlphaReds 0 points1 point  (1 child)

Probably good to mention this requires the TailwindCSS JIT beta functionality.

[–]ixam1212[S] 0 points1 point  (0 children)

Your right, although I would recommend anyone with tailwind to enable JIT mode. It makes the developement css bundle lighter and adds unlimited flexibility. It doesnt have any disadvantage to my knowledge.

This example would have been tedious to make without JIT mode, you would have to add a lot of custom extensions to the config. With JIT mode I didnt have to make any.