Home›Docs›Form›Rate Library

Rate Library

Last updated: 1 month ago

Category: Form

The Rate component enables star-based rating systems with half-star precision and supports custom icons/images for flexible visual styling.

Rate Component: Display Variations, Events, and Method Examples1 month ago Rate Component1 month ago Rate Library: Display Variations, Events, and Method Examples1 month ago Rate Library1 month ago

Preface

Star rating components are not essential plugins for websites, but they can add fun and liveliness to forms.

We conceptualize star ratings as form controls with type=range, where the value range is 0~5 with a step of 1. If half-star ratings are allowed, the step becomes 0.5. Our star rating component offers the following features:

Supports full-star and half-star ratings
Supports custom rating levels (default is 5 levels)
Supports setting scores for each level
Displays final results (including stars and scores) with customizable templates
Shows tooltips with customizable content templates
Includes a clear button to reset to zero
Three size options (sm, md, lg) matching form field sizes
Read-only and disabled modes
Desktop and mobile support for click and swipe selection
Callbacks and event listeners
Customizable star icons and names

Basic Usage

Apply the oc-rate attribute to regular HTML elements.

Output
HTML

```
                
                
            
```

You can also create a rating instance using id+new format.

Output
HTML
JS

```
                
                
            
```

                
                new orca.Rate('#demo0001');

Setting Star Count

Use the count parameter to set the number of stars (default: 5).

Note: count should be a positive integer - decimal values will be truncated.

Output
HTML

```
                
                
            
```

Half-Star Ratings

Set half:true to enable half-star precision.

Output
HTML

```
                
                
            
```

Displaying Results

Set result:true or result.enable:true to show rating results.

Output
HTML

```
                
                
            
```

Customize result format with result.format using {{this.xxx}} template variables:

stars: Number of stars
value: Numeric value
count: Total stars
total: Maximum score
title: Indicates the displayed meaning. If the parameter map is not used, this variable will be empty.

Output
HTML

```
                
                
            
```

Sizes

The component supports three sizes, configured via the size parameter with possible values: sm, md, and lg.

sm: 32px(3.2rem) height, matches text line height for inline usage
md: 40px(4.0rem) height, matches input field height for form integration
lg: 56px(5.6rem) height, matches large input field height for form integration

Output
HTML

Small rating component
works well inline.
```
                
                
            
```

Clear Button

Set clearable:true to display a clear button that resets the rating to zero when clicked.

Output
HTML

```
                
                
            
```

Readonly and Disabled Modes

Set readonly:true for read-only or disabled:true to disable. Both prevent interaction.

Visual differences:

readonly doesn't gray out the element, just prevents interaction
disabled grays out the element to visually indicate unavailability

Output
HTML

```
                
                
            
```

Basic Configuration

Property	Type	Default	Description
name	string	''	Hidden input name attribute
value	number	0	Initial rating value
fill	'value'/'stars'	'value'	Fill type
heading	string	''	Left-side main title
disabled	boolean	false	Whether disabled
readonly	boolean	false	Whether read-only
classes	string	''	Additional CSS classes

Rating Configuration

Property	Type	Default	Description
half	boolean	false	Whether half-stars allowed
count	number	5	Total stars
increment	number	1	Points per star
clearable	boolean	false	Whether clearable
highlight	boolean	false	Whether single highlight
omitted	boolean	false	Whether to hide gray stars

Appearance Configuration

Property	Type	Default	Description
size	'sm'/'md'/'lg'	'md'	Star size
star	string	'_icon-star-f'	Star icon class
type	'icon'/'image'	'icon'	Star display type
map	array	[]	Star mapping

Property	Type	Default	Description
tooltip.enable	boolean	false	Show tooltip
tooltip.format	string	'{{this.stars}} stars, score:{{this.value}}'	Tooltip format
result.enable	boolean	false	Show result
result.format	string	'{{this.stars}} stars'	Result text format

Label Configuration

Property	Type	Default	Description
label.enable	boolean	false	Show label
label.format	string	''	Label content format

Callback Functions

Property	Type	Default	Description
onSet	function	null	After setting new value
onChanged	function	null	After value change
onRestored	function	null	After reset to initial
onCleared	function	null	After clearing to zero