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