Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Card Select
  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

Hint

A prompt for inputs

Hint



Expand Copy
<tk-hint text="I am a hint"></tk-hint>

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

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


Expand Copy
<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.

Icons


Expand Copy
<tk-input type="password" value="**********************" class="l-block mb-2x"></tk-input>
<tk-hint text="Strong password" icon="checkmark-circle" icon-label="Checkmark inside circle icon"></tk-hint>

<hr>
<tk-input type="password" value="*****" class="l-block mb-2x" error></tk-input>
<tk-hint text="Weak password" icon="alert" icon-label="Alert icon" error></tk-hint>

Description

The tk-hint can have an icon preceding the text.

Arbitrary content

Expand Copy
<tk-input type="password" value="**********************"></tk-input>
<tk-hint>
Here are some
<a href="https://www.password-help.com" class="l-inline-flex l-v-center">
tips on setting a strong password
<tk-icon name="external-link" size="xs" class="ml-2x" />
</a>
</tk-hint>

Description

The tk-hint will wrap and style arbitrary content, including HTML.