Rating — Fields | @saastro/forms

Star rating control

Demo not found for field: rating

 /**
 * Rating Field Demo
 */
import { Form, FormBuilder } from '@saastro/forms';
import { FormProvider } from '@/components/FormProvider';
import { TooltipProvider } from '@/components/ui/tooltip';

const config = FormBuilder.create('rating-demo')
  .layout('manual')
  .columns(12)
  .addField('satisfaction', (f) =>
    f
      .type('rating')
      .label('How satisfied are you?')
      .helperText('Click a star to rate (click again to clear)')
      .prop('max', 5)
      .columns({ default: 12 }),
  )
  .addStep('main', ['satisfaction'])
  .build();

export default function RatingDemo() {
  const handleSubmit = (data: Record<string, unknown>) => {
    console.log('Form submitted:', data);
  };

  return (
    <TooltipProvider>
      <FormProvider>
        <Form config={config} onSubmit={handleSubmit} className="space-y-6" />
      </FormProvider>
    </TooltipProvider>
  );
} 

Overview

rating renders a row of star buttons with radiogroup / radio semantics. Configure how many stars with max (default 5).

Value

The submitted value is an integer from 1 to max (valueKind: 'number'). Clicking the currently selected star clears the value back to undefined. Nothing is written until the user clicks — set .value(n) for an initial rating.

Usage

import { FormBuilder } from '@saastro/forms';

const config = FormBuilder.create('feedback')
  .addField('satisfaction', (f) =>
    f.type('rating').label('How satisfied are you?').prop('max', 5),
  )
  .addStep('main', ['satisfaction'])
  .build();

max has no dedicated fluent method — set it with .prop('max', n).

Props

Prop	Type	Default	Description
`max`	`number`	`5`	Number of stars

The filled-star color can be themed via the --saastro-rating CSS variable.