UI MarCom 3

Textfield Stable Dark theme

Textfields are form inputs that let the user enter terms of text.

<uimc-textfield
  label=""
></uimc-textfield>

AttributeDescriptionValuesDefault
themeSets the background-colorlight, gray, darklight
labelLabel text inside the textfield
placeholderPlaceholder text inside the textfield
hintTextSets an info text right under the textfield
valueReflects the current value of the input
validReflects valid state
invalidReflects invalid state
disabledDisables interactions on this element
idOverrides the generated id for input and label with a custom oneuuid

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>