Rating

The TkRating component is a customizable rating input element that allows users to select a value from a series of icons (such as stars, hearts, or dot).

React

import { TkRating } from '@takeoff-ui/react'

Vue

import { TkRating } from '@takeoff-ui/vue'

Angular

import { TkRating } from '@takeoff-ui/angular'

Design Type

This field specifies the design type of the component.

View Code

React

<TkRating
  type="star"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>
<TkRating
  type="heart"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>
<TkRating
  type="dot"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>
<TkRating
  type="number"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>

Vue

<TkRating type="star" v-model="2" />
<TkRating type="heart" v-model="2.5" />
<TkRating type="dot" v-model="4" />
<TKRating type="number" v-model="3"

Angular

<tk-rating type="star" [value]="2" />
<tk-rating type="heart" [value]="2.5" />
<tk-rating type="dot" [value]="4" />
<tk-rating type="number" [value]="3" />

Show Rating Value

Determines whether to show the numerical rating value under to the icon.

View Code

React

<TkRating type="star" value={2} showRatingValue />
<TkRating type="heart" value={2.5} showRatingValue />
<TkRating type="dot" value={3.5} showRatingValue />

Vue

<TkRating type="star" :value="2" :showRatingValue.prop="true" />
<TkRating type="heart" :value="2.5" :showRatingValue.prop="true" />
<TkRating type="dot" :value="3.5" :showRatingValue.prop="true" />

Angular

<tk-rating type="star" [value]="2" showRatingValue />
<tk-rating type="heart" [value]="2.5" showRatingValue />
<tk-rating type="dot" [value]="3.5" showRatingValue />

Max Rating

The maximum rating value. Possible options are 5 or 10.

View Code

React

<TkRating type="star" value={2.5} showRatingValue maxRating={3} />
<TkRating type="star" value={4} showRatingValue maxRating={6} />
<TkRating type="star" value={5.5} showRatingValue maxRating={10} />

Vue

<TkRating
  type="star"
  :value="2"
  :showRatingValue.prop="true"
  :maxRating="3"
/>
<TkRating
  type="star"
  :value="2.5"
  :showRatingValue.prop="true"
  :maxRating="5"
/>
<TkRating
  type="star"
  :value="3.5"
  :showRatingValue.prop="true"
  :maxRating="10"
/>

Angular

<tk-rating type="star" [value]="2.5" showRatingValue [maxRating]="3" />
<tk-rating type="star" [value]="4" showRatingValue [maxRating]="6" />
<tk-rating type="star" [value]="5.5" showRatingValue [maxRating]="10" />

States

This example illustrates the disabled state of the rating.

Disabled

Readonly

View Code

React

<TkRating type="star" value={3.5} showRatingValue disabled />
<TkRating type="star" value={3.5} showRatingValue readonly />

Vue

<TkRating type="star" value="3.5" :showRatingValue.prop="true" disabled />
<TkRating type="star" value="3.5" :showRatingValue.prop="true" readonly />

Angular

<tk-rating type="star" [value]="3.5" showRatingValue disabled />
  <tk-rating type="star" [value]="3.5" showRatingValue readonly />

API

Props

Name	Type	Default	Description
	boolean	false	The user cannot interact with the input.
	number	5	The maximum rating value. Possible options are 5 or 10.
	boolean	false	If true, the user cannot modify the value.
	boolean	false	Determines whether to show the numerical rating value under to the icon.
	"dot", "heart", "number", "star"	'star'	The type of icon to display for each rating element. Options include 'star', 'heart', 'dot' and 'number'.
	number	0	The currently selected rating value.

Events

Name	Description
tk-change	Emitted when the value has changed.