Textfield Stable Dark theme
Textfields are form inputs that let the user enter terms of text.
<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 |
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>