If I need a text field that is neither filled (`Te...

# compose

[Marcin Wisniowski]

If I need a text field that is neither filled (TextField) nor outlined (OutlinedTextField), what’s the recommended approach of implementing one? I still want the underline, icons, labels, placeholders, supporting text, etc. just don’t need the outline or the fill. I’m considering using TextField and restyling it to hide the filled background but it feels hacky.

[chanjungskim]

BasicTextField?

[Marcin Wisniowski]

It doesn’t have support for labels, placeholders, errors, pre/postfixes, icons, and all the other functionality of TextField

[Marcin Wisniowski]

So I’d either have to reimplement a lot of functionality around BasicTextField to get back what TextField already supports, or copy the TextField code to my code and change it, or heavily restyle it (may or may not work).

Just wondering what other people did or if there is some recommended approach.

[Stylianos Gakis]

Yep, take the m3 impl and customize it as you wish. Example.
I found that to be the best approach for our needs. And here’s some videos of how it looks like just to get an idea of why we needed to do this and how custom it was vs the m3 implementation.
When copying over the code, the good part was that since the impl is there to support both outlined and filled cases, I could remove 50% of it since I only cared about taking 1 of them and changing them slightly.

[Colton Idle]

I think we just take the filled one and set the color to transparent or the color of our background or something.

[Stylianos Gakis]

That usually is sub-optimal as you still get the spacings of that component, even if you're hiding parts of it. Really, making your own decoration for the text field isn't that bad, I suggest people who need customization to just try it. Taking the material implementation helps a lot too.

[Colton Idle]

I think we could edit the spacings now so it wasn't so weird looking. but yeah, i know in the past that was an issue. maybe we just copy pastad it. not sure, now that i think about it.

[Stylianos Gakis]

Most likely copy-pasted it. A lot of the paddings in there follow the material 3 specs quite closely, don’t give a lot of room for changes. At least it didn’t work for what I needed 😄

[Marcin Wisniowski]

I ended up using BasicTextField along with TextField's DecorationBox and ContainerBox and customizing all that. The only thing I wasn't able to change were the "supporting text" (info text below the input field) paddings, so I had to create my own Text for that instead of using the built-in one.

[Marcin Wisniowski]

But the takeaway is that you can customize a lot by using BasicTextField along with DecorationBox

[Colton Idle]

this video from Ale on the compose team goes over text field styling too:

https://youtu.be/_qls2CEAbxI?t=407▾