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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/rate.md.
Leaf UI
  • English

      • Rate

      Select or display a rating.

      Choose a rating

      Current rating: 3.5
      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>
  );
}

      Colors by score

      Coral for low scores, amber for medium and yellow for high. Current rating: 2
      Brand color
      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>
  );
}

      Read-only and disabled

      Read-only rating
      Disabled rating
      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>
  );
}

      Rate API

      PropertyTypeDefaultDescription
      value / defaultValuenumber0Controlled / initial rating
      onChange(value: number) => void—Rating changes
      countnumber5Number of stars, up to 20
      allowHalf / allowClearbooleanfalse / trueHalf stars / click again to clear
      readOnly / disabledbooleanfalseRead-only / disabled
      size'sm' | 'md' | 'lg''md'Star size
      colorstring'#ffc53d'Fixed color; takes precedence over score colors
      colorByValuebooleanfalseUse low, medium and high score colors
      colorsreadonly [string, string, string]—Low, medium and high colors, with thresholds of 40% and 70%
      name / formstring—Field name / associated form
      requiredbooleanfalseRequire a nonzero rating

      Types

      Import these types to define props or prepare data.

      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.