<uimc-textfield
label=""
></uimc-textfield>
| Attribute | Description | Values | Default |
|---|
| theme | Sets the background-color | light, gray, dark | light |
| label | Label text inside the textfield | | – |
| placeholder | Placeholder text inside the textfield | | – |
| hintText | Sets an info text right under the textfield | | – |
| value | Reflects the current value of the input | | – |
| valid | Reflects valid state | – | – |
| invalid | Reflects invalid state | – | – |
| disabled | Disables interactions on this element | – | – |
| id | Overrides the generated id for input and label with a custom one | | uuid |
| Callback | Argument | Description |
|---|
| onInput | value | Callback function that gets triggered immediately when when the value is modified |
| onChange | value | Callback function that gets triggered when when the value is modified |
| onFocus | object | Callback function that gets triggered when the component gets focus |
| onBlur | object | Callback function that gets triggered when the component loses focus |
Textfield
<uimc-textfield
label="Label"
></uimc-textfield>
Textfield valid state
<uimc-textfield
valid
label="Label"
hint-text="Success message"
value="Valid input text"
></uimc-textfield>
Textfield invalid state
<uimc-textfield
invalid
placeholder="sample@mail.com"
label="Label"
hint-text="Error message"
value="Invalid input text"
></uimc-textfield>
Textfield disabled
<uimc-textfield
disabled
label="Label"
></uimc-textfield>
Textarea
<uimc-textarea
label="Textarea"
></uimc-textarea>
Textarea valid state
<uimc-textarea
label="Textarea"
valid="true"
></uimc-textarea>
Textarea invalid state
<uimc-textarea
label="Textarea"
invalid="true"
></uimc-textarea>
Textarea disabled
<uimc-textarea
label="Textarea"
disabled="true"
></uimc-textarea>
