Leaf UI
  • English

      • Rate

      Select or display a rating.

      Basic usage

      Live previewBasic usage

      Current rating: 3.5

      basic.tsx
      import { Rate } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function RateBasic() {
  const [value, setValue] = useState(3.5);
  return (
    <div className="leaf-demo-stack">
      <Rate aria-label="Project rating" value={value} onChange={setValue} allowHalf />
      <p className="leaf-demo-note">Current rating: {value}</p>
      <Rate aria-label="Read only rating" defaultValue={4} readOnly color="#20834a" />
      <Rate aria-label="Disabled rating" defaultValue={2} disabled size="sm" />
    </div>
  );
}

      Rate API

      PropertyTypeDefaultDescription
      value / defaultValuenumber0Controlled / initial rating
      onChange(value: number) => void—Rating changes
      countnumber5Stars, from 1 to 20
      allowHalf / allowClearbooleanfalse / trueHalf ratings / click again to clear
      disabled / readOnlybooleanfalseDisabled / read only
      size'sm' | 'md' | 'lg''md'Star size
      colorstringTheme warning colorRating color
      name / formstring—Field name / form ID
      requiredbooleanfalseRequire a nonzero rating

      Types

      Import the exported types when defining props or building item lists.

      import type { RateProps } from '@sudden3/leaf-ui';

      Usage notes

      Arrow keys change the rating, Home / End select the first or last rating, and Delete or Backspace clears it. Set name to read ratings with FormData. required participates in form validation; uncontrolled ratings support reset.