Input
A reusable input component is a pure and predictable component that can be used across multiple applications. Here are some features of a reusable input component:
- Type: Specifies the type of input, such as "text", "number", "email", or "password"
- Label: The text for the input label
- Value: The current value of the input
- Error: An optional error message that is shown based on a condition
Variants
Props
| Props | Datatype | Example | Default value |
|---|---|---|---|
| value | string | "any value" | "" |
| labelText | string | "label" | "" |
| labelDescription | string | "description" | "" |
| inputId | string | "123" | "" |
| inputPlaceholder | string | "Enter name" | "" |
| isRequired | boolean | "true" | "false" | false |
| errorText | string | "Invalid Value" | "" |
| type | string | "text" | "input" |
| invalidValue | boolean | "true" | "false" | false |
| maxCharacter | number | 100 | 100 |
| onChange | function | function from parent component | |
| inputStyleProp | Object | font-size: var(--base-text) | "" |
| inputClassProp | Object | font-size: var(--base-text) | "" |
| labelDescriptionClassProp | Object | font-size: var(--base-text) | "" |
| labelDescriptionStyleProp | Object | font-size: var(--base-text) | "" |
| labelTextClassProp | Object | font-size: var(--base-text) | "" |
| labelTextStyleProp | Object | font-size: var(--base-text) | "" |