Display Required Fields, Supporting Text and Icons for `TextInputs`

[Sn3llius]

Description

Currently, our TextInputs component lacks the ability to indicate which fields are required, provide supporting text, and display leading and trailing icons. These features are crucial for enhancing user experience by guiding them through forms more effectively, ensuring they understand what information is needed, and improving the overall aesthetics and functionality of the input fields.

Design Guidline

https://m3.material.io/components/text-fields/guidelines

Proposed Solution

Required Fields Indicator:

• Add is_required attribute to the TextInput component.
• When is_required is set to True, display an asterisk (*) next to the label.
• Optionally, add a is_required_indicator attribute to allow customization of the indicator (e.g., text, color). needs discussion

Supporting Text:

• Add supporting_text attribute to the TextInput component.
• The supporting text should be displayed below the input field.
• Style the supporting text to be visually distinct but not distracting (see Design Guidline).

Leading Icon:

• Add a leading_icon attribute to the TextInput component. naming needs discussion
• The leading_icon should be displayed inside the TextInput, aligned to the left.
• Allow customization of the icon, which accepts an icon component or a string for the icon name.

Trailing Icon:

• Add a trailing_icon attribute to the TextInput component. naming needs discussion
• The trailing_icon should be displayed inside the TextInput, aligned to the right.
• Allow customization of the icon, which accepts an icon component or a string for the icon name.

Alternatives

No response

Additional Context

• Since TextInputand NumberInput are very similar, we should not forget to update the python interface for NumberInput.
• Update documentation and examples for these new features.

Related Issues/Pull Requests

#105, #106