Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

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

Form

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

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

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

Overlay

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

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

Label

A label for inputs.

Input Label

Label

Expand Copy
<tk-label>Label</tk-label>
<hr>
<tk-input label-text="Labelled Input"></tk-input>
<hr>
<tk-text-area label-text="Labelled Text Area"></tk-text-area>

Description

tk-label is used to label inputs. They can be used alone or in conjunction with an input (e.g. with a tk-input)

Sizes


Expand Copy
  <tk-input label-text="Medium Label" label-size="medium"></tk-input>
  <hr/>
  <tk-input label-text="Large Label" label-size="large"></tk-input>

Description

The size of the label can be specified by the size prop.

Disabled


Expand Copy
<tk-input disabled label-text="Disabled Medium Label" label-size="medium"></tk-input>
<hr/>
<tk-input disabled label-text="Disabled Large Label" label-size="large"></tk-input>

Description

Changing the disabled prop to true shows that it’s input cannot be used.

Props

Property Required? Default Description
size no medium The size of the label, can either be medium, or large
disabled no false If the label is disabled, it shows that it’s input cannot be used