Live example
Properties
|
Name |
Values |
Default |
|---|---|---|
|
hasVisibilityToggle |
boolean |
false |
|
iconLeft |
IconName |
|
|
iconRight |
IconName |
|
|
as |
'input' | 'select' | 'textarea' |
'input' |
|
accepts all FieldProps |
FieldProps |
|
|
... |
JSX.IntrinsicElements["input"] |
|
Native Properties
|
Name |
Values |
Default |
|---|---|---|
|
label (required) |
string |
|
|
hasVisibilityToggle |
boolean |
false |
|
iconLeft |
IconName |
|
|
iconRight |
IconName |
|
|
… |
Omit<FieldProps, 'children'> |
false |
Composition
- Label text
- Hint text
- Input text
- Input border
- Show/hide password icon
|
Tokens |
|
|---|---|
|
Text color |
color.surface.onsurface |
|
Hint text color |
color.surface.onsurfacevariant |
|
Input border color |
input.color.border |
|
Text font weight |
font.family.bold |
|
Hint text font weight |
font.family.book |
|
Text size |
font.size.md |
|
Text line height |
font.lineheight.md |
|
Padding |
space.100 space.200 |
|
Input border width |
border.width.md |