Text Fields (Date Picker)

Date Pickers allow users to input a single date by selecting from a calendar view.

Variants

Variant	Usage
Default	Date Picker on load state
Active	Date selected
Disabled	Date Picker is not available for input
Error	Date Picker is validated with an error

Date Picker fields are made up of the following:

Text label: All variants except for Default will have text labels, it describes what the input is for.
Icon : Calendar button for the user to launch the Date Picker.
Placeholder/Input: Where input details will fill up the field.
Line: Containers can expand, and can be solid or outlined.
Inline message: For validation messages.

Textfield should have a fixed width. (87.73% of screen size)

All text labels in our buttons have the same text size

Label size
- Title Case for Label (i.e. Click here, Sign up now).
- Use “label or note” text style on Figma.
Inline message
- Sentence Case.
- Use “Note Small” text style on Figma.
Body copy - Use body emphasis and black emphasis colour when in typing state.

Use inline messages only when necessary,i.e. error messages

Truncate text labels.