Hint

A prompt for inputs

Hint


Labelled Input
Labelled Text Area
<tk-hint text="I am a hint"></tk-hint>
<hr>

<tk-label id="labelled-input">
  Labelled Input
  <tk-input
    aria-labelledby="labelled-input"
    aria-describedby="labelled-input-hint"
  ></tk-input>
  <tk-hint
    id="labelled-input-hint"
    text="I am an input hint"
  />
</tk-label>
<hr>
<tk-label id="labelled-text-area">
  Labelled Text Area
  <tk-text-area
    aria-labelledby="labelled-text-area"
    aria-describedby="labelled-text-area-hint"
  ></tk-text-area>
  <tk-hint
    id="labelled-text-area-hint"
    text="Iam am a text area hint"
  />
</tk-label>

Description

tk-hint is used to give prompts or information for inputs. They can be used in conjunction with inputs and labels (e.g. with a tk-input and tk-label)

States


<tk-hint text="Default state">
</tk-hint>
<hr>
<tk-hint text="Error state" error>
</tk-hint>

Description

The tk-hint can be in an error state.

Props

Property Required? Default Description
text yes The text to be displayed in the hint
error no false Displays the hint in a error style