Rating

import { Rating } from "@grassroot/ui-react";
 
const [value, setValue] = React.useState(4);
 
<Rating value={value} onChange={setValue} label="Rate this trowel" />
<Rating value={4.5} readOnly size="sm" />

import { Component, signal } from "@angular/core";
import { GrassrootRating } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootRating],
  template: `
    <grassroot-rating
      [value]="value()"
      (change)="value.set($event)"
      label="Rate this trowel"
    />
    <grassroot-rating [value]="4.5" [readOnly]="true" size="sm" />
  `,
})
export class ExampleComponent {
  readonly value = signal(4);
}

<script lang="ts">
  import { Rating } from "@grassroot/ui-svelte";
 
  let value = $state(4);
</script>
 
<Rating value={value} onChange={(next) => (value = next)} label="Rate this trowel" />
<Rating value={4.5} readOnly size="sm" />

import { createSignal } from "solid-js";
import { Rating } from "@grassroot/ui-solid";
 
export function Example() {
  const [value, setValue] = createSignal(4);
 
  return (
    <>
      <Rating value={value()} onChange={setValue} label="Rate this trowel" />
      <Rating value={4.5} readOnly size="sm" />
    </>
  );
}