Display Required Fields, Supporting Text, Icon, `is_sensitive` and `is_valid` for `DateInput`
Opened this issue · 0 comments
Sn3llius commented
Description
Currently, our DateInputs
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/date-pickers/guidelines
Proposed Solution
Required Fields Indicator:
- Add
is_required
attribute to theDateInput
component. - When
is_required
is set toTrue
, 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 theDateInput
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).
Validation:
- Visually displays to the user whether the current date
is_valid
(similar to other input fields)
Trailing Icon:
- Add a
trailing_icon
attribute to theDateInput
component. naming needs discussion - The
trailing_icon
should be displayed inside theDateInput
, aligned to the right. - Allow customization of the icon, which accepts an icon component or a string for the icon name.
Sensitiv:
is_sensitive
: bool = True (similar to other input fields)
Alternatives
No response
Additional Context
- Update documentation and examples for these new features.