> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/rate.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Rate

Select or display a rating.

## Choose a rating


Current rating: 3.5

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/rate/basic.tsx"
import { Rate, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function RateBasic() {
  const [value, setValue] = useState(3.5);
  return (
    <Space direction="vertical" align="stretch">
      <Rate aria-label="Project rating" value={value} onChange={setValue} allowHalf />
      <output>
        <Text tone="muted">Current rating: {value}</Text>
      </output>
    </Space>
  );
}
```

Expand code

## Colors by score


Coral for low scores, amber for medium and yellow for high. Current rating: 2

Brand color

colors.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/rate/colors.tsx"
import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function RateColors() {
  const [value, setValue] = useState(2);
  return (
    <Space direction="vertical" align="stretch">
      <Rate aria-label="Score colors" value={value} onChange={setValue} colorByValue />
      <output>
        <Text tone="muted">
          Coral for low scores, amber for medium and yellow for high. Current rating: {value}
        </Text>
      </output>
      <Flex direction="column" gap="sm">
        <Text>Brand color</Text>
        <Rate defaultValue={4} readOnly color="#7654c6" />
      </Flex>
    </Space>
  );
}
```

Expand code

## Read-only and disabled


Read-only rating

Disabled rating

states.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/rate/states.tsx"
import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';

export function RateStates() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>Read-only rating</Text>
        <Rate defaultValue={4} readOnly />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Disabled rating</Text>
        <Rate defaultValue={2} disabled size="sm" />
      </Flex>
    </Space>
  );
}
```

Expand code

## Rate API

| Property                 | Type                                | Default        | Description                                                 |
| ------------------------ | ----------------------------------- | -------------- | ----------------------------------------------------------- |
| `value / defaultValue`   | `number`                            | `0`            | Controlled / initial rating                                 |
| `onChange`               | `(value: number) => void`           | —              | Rating changes                                              |
| `count`                  | `number`                            | `5`            | Number of stars, up to 20                                   |
| `allowHalf / allowClear` | `boolean`                           | `false / true` | Half stars / click again to clear                           |
| `readOnly / disabled`    | `boolean`                           | `false`        | Read-only / disabled                                        |
| `size`                   | `'sm' \| 'md' \| 'lg'`              | `'md'`         | Star size                                                   |
| `color`                  | `string`                            | `'#ffc53d'`    | Fixed color; takes precedence over score colors             |
| `colorByValue`           | `boolean`                           | `false`        | Use low, medium and high score colors                       |
| `colors`                 | `readonly [string, string, string]` | —              | Low, medium and high colors, with thresholds of 40% and 70% |
| `name / form`            | `string`                            | —              | Field name / associated form                                |
| `required`               | `boolean`                           | `false`        | Require a nonzero rating                                    |

## Types

Import these types to define props or prepare data.

```ts
import type { RateProps } from '@ifhover/leaf-ui';
```

## Usage notes

Hover previews the score and color; leaving restores the selected value. Arrow keys adjust rating, Home/End jump to the ends and Delete/Backspace clear. Read-only preserves display; disabled also prevents interaction. Supports FormData and uncontrolled form reset.