Anatomy
| 1. input-area | |
| 2. placeholder | |
| 3. input-text | |
| 4. clear-icon | |
| 5. hide-icon | |
| 6. support-text |
Structure
| input-area | height | --size-height-06 |
| align-items | center | |
| padding-left | --spacing-inset-04 | |
| padding-right | --spacing-inset-04 | |
| gap | --spacing-inline-02 | |
| border-radius | --border-radius-rounded-03 | |
| hide-icon | height | --size-square-03 |
| width | --size-square-03 | |
| clear-icon | height | --size-square-03 |
| width | --size-square-03 |
Color
Default
| input-area | background-color | --color-interactive-alternative-default |
| placeholder | color | --color-content-secondary |
| hide-icon | fill | --color-content-primary |
Active
| input-area | border-color | --color-interactive-main-default |
| input-text | color | --color-content-primary |
| clear-icon | fill | --color-content-primary |
Error
| input-area | border-color | --color-support-error |
| clear-icon | fill | |
| password-icon | fill | --color-support-error |
| support-text | color | --color-support-error |
Typography
Default
| placeholder | properties class (mixin) | --type-style-input |
| text-overflow | ellipsis | |
| text-align | left |
Active
| placeholder | properties class (mixin) | |
| text-overflow | ellipsis | |
| text-align | left | |
| input-text | properties class (mixin) | |
| text-overflow | ellipsis | |
| text-align | left |
Error
| support-text | properties class (mixin) | |
| text-overflow | ellipsis | |
| text-align | left |