Password Input
A text input field for entering passwords.
Figma Link
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=948-13632
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
A text input field for entering text.
Text input component with icon, affix, label and hint text.
To change the width of the input field, either wrap it in a div with a fixed width, or you can apply display: block to the input field, and then provide a width.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-text-input--docs
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| error | Whether text field is in error state. | boolean | false |
| leadingIcon | Leading icon name. | ZetaIconName | undefined | undefined |
| trailingIcon | Trailing icon name. | ZetaIconName | undefined | undefined |
| prefix | Prefix text. | string | "" |
| suffix | Suffix text. | string | undefined | undefined |
| rows | The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.Prop only applies when type is set to textarea. | number | undefined | undefined |
| showClearButton | Displays a button to clear the text field when true.This will always display in the right most position and will push any trailing icon or suffix to the left.It will apply to all text field types and will push any type specific interactions to the left as well.For type textarea, the clear button will be displayed in the top right corner of the text area.The clear button will not be displayed if the text field is disabled or read-only. | boolean | false |
| label | Label shown above text field. | string | "" |
| hintText | Hint text shown below text field.if error, then errorText is shown instead. | string | undefined | undefined |
| errorText | Error hint textShown if error, replaces hintText. | string | undefined | undefined |
| type | Type of field | "text" | "textarea" | "password" | "time" | "date" | "number" | "integer" | "text" |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| autoCapitalize | Whether inputted text is automatically capitalized and how. Only takes effect on non-keyboard entry | "none" | "off" | "sentences" | "on" | "words" | "characters" | undefined | undefined | FormField |
| autoComplete | AutoFill | undefined | undefined | FormField | |
| name | The name of the form control. | string | "" | FormField |
| id | The id of the form control. | string | "" | FormField |
| required | Indicates whether the form control is required to be filled out before submitting the form. | boolean | false | FormField |
| value | The value of the Form Control that is submitted when part of a form. | string | null | null | FormField |
| checked | The state of the Switch or Checkbox that is submitted when part of a form. | boolean | undefined | FormField |
| indeterminate | The state of the Switch or Checkbox defined by a mixed or unknown state. | boolean | false | FormField |
| placeholder | Placeholder text shown when value is empty. | string | undefined | undefined | FormField |
| min | The minimum value for number inputs | number | undefined | undefined | FormField |
| max | The maximum value for number inputs | number | undefined | undefined | FormField |
| readOnly | Placeholder text shown when value is empty. | boolean | undefined | undefined | FormField |
| spellCheck | Whether to spellcheck the input | boolean | "default" | undefined | undefined | FormField |
| disabled | Boolean for if component is disabled.This will apply disabled styles. | boolean | false | Interactive |
| size | Size of component | SizeType | "medium" | Size |
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
| tabIndex | The tab index of the component, used to determine the order in which elements receive focus when the user navigates through the document by pressing the Tab key. | number | 0 | Interactive |
Flutter component not available yet