Text fields

[robinlahtinen]

Design document: https://m3.material.io/components/text-fields

Task list

• Implement base component
• Text fields uses :has() CSS pseudo-class that many browsers don't support yet #29

[stephanebastian]

Just looking at the specification and it seems that prefix and suffix are not implemented yet.
Just for information, here is how the latest version of flutter renders things with all properties set (label, leading icon, prefix, hint, trailing icon, suffix)

Note that in flutter 'hint' is equivalent to 'placeholder' in material 3. As soon as you enter some text in the input field, the hint is hidden
To summarize a text field has the following properties:

• Label text
• Leading icon (optional)
• Prefix text (optional)
• Placeholder text (optional and hidden when 'input text' is not empty)
• Input text (optional)
• Suffix text (optional)
• Trailing icon (optional)
• Supporting text (optional)
• Counter text (optional displayed whenever there is a limit on the number of characters)