components
Textfield
Enable user to interact with and input content and data. This component can be used for long and short form entries.
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
N50
none
Predefined by States
- N0: Unfilled, Filled, Unfilled Error, Filled Error, Focused, Typing
- - N50: Unfilled Read-only, Filled Read-only
Width
full
none
Height
52px (fixed)
none
Radius
8px
none
Outline
N200
B400
R400
none
Predefined by States
- N200: Unfilled, Filled,Unfilled Read-only, Filled Read-only
- R400: Unfilled Error, Filled Error
- B400: Focused, Typing
Placeholder text
removable
changeable
Text style
body 3 - regular
none
Color
text LE
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 line
none
Input text
removable
changeable
Text style
body 2 - regular
none
Color
text LE
text HE
text alert
none
Predefined by States
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 line
none
If the text is too long will be cut off
Helper text
removable
changeable
Text style
body 3 - regular
none
Color
text LE
text alert
none
Predefined by States
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Icon
removable
changeable
Color
icon HE
none
Icon
tds_ic_oval_cross
exposed
Size
20x20
none
Image source
TDS asset
none
Dimension
Tap area
Content area
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
N50
none
Predefined by States
- N0: Unfilled, Filled, Unfilled Error, Filled Error, Focused, Typing
- - N50: Unfilled Read-only, Filled Read-only
Width
full
none
Height
52px (fixed)
none
Radius
8px
none
Outline
N200
B400
R400
none
Predefined by States
- N200: Unfilled, Filled,Unfilled Read-only, Filled Read-only
- R400: Unfilled Error, Filled Error
- B400: Focused, Typing
Placeholder text
removable
changeable
Text style
body 3 - regular
none
Color
text LE
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 line
none
Input text
removable
changeable
Text style
body 2 - regular
none
Color
text LE
text HE
text alert
none
Predefined by States
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 line
none
If the text is too long will be cut off
Helper text
removable
changeable
Text style
body 3 - regular
none
Color
text LE
text alert
none
Predefined by States
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Icon
removable
changeable
Color
icon HE
none
Icon
tds_ic_oval_cross
exposed
Size
20x20
none
Image source
TDS asset
none
Dimension
Tap area
Content area
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0
N50
none
Predefined by States
- N0: Unfilled, Filled, Unfilled Error, Filled Error, Focused, Typing
- - N50: Unfilled Read-only, Filled Read-only
Width
full
none
Height
52px (fixed)
none
Radius
8px
none
Outline
N200
B400
R400
none
Predefined by States
- N200: Unfilled, Filled,Unfilled Read-only, Filled Read-only
- R400: Unfilled Error, Filled Error
- B400: Focused, Typing
Placeholder text
removable
changeable
Text style
body 3 - regular
none
Color
text LE
none
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 line
none
Input text
removable
changeable
Text style
body 2 - regular
none
Color
text LE
text HE
text alert
none
Predefined by States
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
max 1 line
none
If the text is too long will be cut off
Helper text
removable
changeable
Text style
body 3 - regular
none
Color
text LE
text alert
none
Predefined by States
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Icon
removable
changeable
Color
icon HE
none
Icon
tds_ic_oval_cross
exposed
Size
20x20
none
Image source
TDS asset
none
Dimension
Tap area
Content area
