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

  • 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

Rating stars

Rating stars component that supports half stars

A common use case for tk-rating-stars is displaying it as part of tester vitals. Check its docs for full reference.

Rating stars

Copy
<tk-rating-stars>
</tk-rating-stars>

Rendering with pre-filled rating

Copy
<tk-rating-stars rating="3">
</tk-rating-stars>

Description

Any value between 0 and 5 is supported. Half stars are only supported in read-only mode.

Rendering read only

Expand Copy
<tk-rating-stars readonly="true" rating="0.5">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="1">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="1.5">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="2">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="2.5">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="3">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="3.5">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="4">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="4.5">
</tk-rating-stars>
<tk-rating-stars readonly="true" rating="5">
</tk-rating-stars>

Description

Any value between 0 and 5 is supported. Use a .5 decimal point to render half stars.

Props

Property Default Description
rating undefined Renders the component with a pre-filled value
readonly false Renders the component in read-only mode (giving a rating won’t be possible)

Events

Name Description
starRatingChanged Emits whenever a star gets selected

Methods

Name Arguments Description
getValue() - Returns current rated value