SGUI / Development
Rating
Single-answer ratings with stars, numbers, labels and shared or per-answer custom icon groups.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Single-answer ratings with stars, numbers, labels and shared or per-answer custom icon groups.
Loading examples…
Loading examples…
Loading examples…
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function SurveyRatingExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"Session rating"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" highlightMode="cumulative" highlightAppearance="icon" appearance="outlined" choiceShape="rounded" layout="inline" buttonWidth="equal" showOptionLabels={false} clearable={true} disabled={false} readOnly={false} required={false} invalid={false} description="Choose one answer. Nothing is selected until you respond." errorMessage="Choose a rating before continuing."/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(3);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="plain" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
import {HeartIcon} from '@structured-growth/sg-ui/icons';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(3);
return (
<>
<Rating label={"How helpful was this session?"} variant="icons" icon={<HeartIcon fill="currentColor"/>} emptyIcon={<HeartIcon/>} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="plain" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="icons" icon="👍" emptyIcon="-" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="plain" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
Select 1–5. Agreement labels stay above their corresponding numbers; only the selected number is highlighted.
'use client';
import { useState } from 'react';
import {Rating,Typography} from '@structured-growth/sg-ui/primitives';
export default function NumberedLikertExample() {
const [value,setValue]=useState<number|null>(null);
const options=[{value:1,label:"Strongly disagree",annotation:<Typography as="span" variant="body2">{"Strongly disagree"}</Typography>},{value:2,label:"Disagree",annotation:<Typography as="span" variant="body2">{"Disagree"}</Typography>},{value:3,label:"Neither agree nor disagree",annotation:<Typography as="span" variant="body2">{"Neither agree nor disagree"}</Typography>},{value:4,label:"Agree",annotation:<Typography as="span" variant="body2">{"Agree"}</Typography>},{value:5,label:"Strongly agree",annotation:<Typography as="span" variant="body2">{"Strongly agree"}</Typography>}];
return (
<>
<Rating label="The session helped me understand the topic." variant="numbers" options={options} value={value} onValueChange={setValue} orientation="horizontal" highlightMode="selected" highlightAppearance="background" clearable/>
</>
);
}
Scale anchors are independent of the circular number choices. Long labels do not widen the buttons.
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function LikelihoodScaleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating orientation="horizontal" layout="inline" label="How likely are you to recommend this session?" variant="numbers" max={7} choiceShape="circle" scaleLabels={{start:"Not at all likely",middle:"Neutral",end:"Extremely likely"}} value={value} onValueChange={setValue} highlightMode="selected" highlightAppearance="background" clearable/>
</>
);
}
Scale anchors are independent of the circular number choices. Long labels do not widen the buttons.
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function LikelihoodScaleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating orientation="horizontal" layout="staggered" label="How likely are you to recommend this session?" variant="numbers" max={7} choiceShape="circle" scaleLabels={{start:"Not at all likely",middle:"Neutral",end:"Extremely likely"}} value={value} onValueChange={setValue} highlightMode="selected" highlightAppearance="background" clearable/>
</>
);
}
Scale anchors are independent of the circular number choices. Long labels do not widen the buttons.
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function LikelihoodScaleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating orientation="vertical" layout="inline" label="How likely are you to recommend this session?" variant="numbers" max={7} choiceShape="circle" scaleLabels={{start:"Not at all likely",middle:"Neutral",end:"Extremely likely"}} value={value} onValueChange={setValue} highlightMode="selected" highlightAppearance="background" clearable/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="compact" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="compact" orientation="vertical" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="vertical" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":0,"label":"0 — No pain","annotation":"🙂"},{"value":1,"label":"1 of 10 pain","annotation":null},{"value":2,"label":"2 — Mild pain","annotation":"😐"},{"value":3,"label":"3 of 10 pain","annotation":null},{"value":4,"label":"4 — Moderate pain","annotation":"🙁"},{"value":5,"label":"5 of 10 pain","annotation":null},{"value":6,"label":"6 — Strong pain","annotation":"😣"},{"value":7,"label":"7 of 10 pain","annotation":null},{"value":8,"label":"8 — Severe pain","annotation":"😫"},{"value":9,"label":"9 of 10 pain","annotation":null},{"value":10,"label":"10 — Extreme pain","annotation":"😭"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How much pain are you experiencing?"} variant="numbers" options={options} max={5} value={value} onValueChange={setValue} density="compact" orientation="horizontal" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":0,"label":"0 — No pain","annotation":"🙂"},{"value":1,"label":"1 of 10 pain","annotation":null},{"value":2,"label":"2 — Mild pain","annotation":"😐"},{"value":3,"label":"3 of 10 pain","annotation":null},{"value":4,"label":"4 — Moderate pain","annotation":"🙁"},{"value":5,"label":"5 of 10 pain","annotation":null},{"value":6,"label":"6 — Strong pain","annotation":"😣"},{"value":7,"label":"7 of 10 pain","annotation":null},{"value":8,"label":"8 — Severe pain","annotation":"😫"},{"value":9,"label":"9 of 10 pain","annotation":null},{"value":10,"label":"10 — Extreme pain","annotation":"😭"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How much pain are you experiencing?"} variant="numbers" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":0,"label":"0 — No pain","annotation":"🙂"},{"value":1,"label":"1 of 10 pain","annotation":null},{"value":2,"label":"2 — Mild pain","annotation":"😐"},{"value":3,"label":"3 of 10 pain","annotation":null},{"value":4,"label":"4 — Moderate pain","annotation":"🙁"},{"value":5,"label":"5 of 10 pain","annotation":null},{"value":6,"label":"6 — Strong pain","annotation":"😣"},{"value":7,"label":"7 of 10 pain","annotation":null},{"value":8,"label":"8 — Severe pain","annotation":"😫"},{"value":9,"label":"9 of 10 pain","annotation":null},{"value":10,"label":"10 — Extreme pain","annotation":"😭"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How much pain are you experiencing?"} variant="numbers" options={options} max={5} value={value} onValueChange={setValue} density="compact" orientation="vertical" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":0,"label":"0 — No pain","annotation":"🙂"},{"value":1,"label":"1 of 10 pain","annotation":null},{"value":2,"label":"2 — Mild pain","annotation":"😐"},{"value":3,"label":"3 of 10 pain","annotation":null},{"value":4,"label":"4 — Moderate pain","annotation":"🙁"},{"value":5,"label":"5 of 10 pain","annotation":null},{"value":6,"label":"6 — Strong pain","annotation":"😣"},{"value":7,"label":"7 of 10 pain","annotation":null},{"value":8,"label":"8 — Severe pain","annotation":"😫"},{"value":9,"label":"9 of 10 pain","annotation":null},{"value":10,"label":"10 — Extreme pain","annotation":"😭"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How much pain are you experiencing?"} variant="numbers" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="vertical" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="compact" orientation="horizontal" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="compact" orientation="vertical" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="vertical" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="compact" orientation="horizontal" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="compact" orientation="vertical" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Strongly disagree"},{"value":2,"label":"Disagree"},{"value":3,"label":"Neither agree nor disagree"},{"value":4,"label":"Agree"},{"value":5,"label":"Strongly agree"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"The session helped me understand the topic."} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="vertical" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Choose how much you agree with the statement. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="numbers" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Very dissatisfied"},{"value":2,"label":"Dissatisfied"},{"value":3,"label":"Neutral"},{"value":4,"label":"Satisfied"},{"value":5,"label":"Very satisfied"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="staggered" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="numbers" max={10} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"A ten-point scale, with one numeric form value and no selection by default."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Very dissatisfied"},{"value":2,"label":"Dissatisfied"},{"value":3,"label":"Neutral"},{"value":4,"label":"Satisfied"},{"value":5,"label":"Very satisfied"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"The visible answer labels also provide each radio's accessible name."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="icons" icon="👍" emptyIcon="-" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="cumulative" highlightAppearance="icon" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Unanswered choices start as dashes. Hover previews thumbs up through that position; selecting keeps those icons, and leaving restores the selected rating."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
import {HeartIcon} from '@structured-growth/sg-ui/icons';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="icons" icon={<HeartIcon fill="currentColor"/>} emptyIcon={<HeartIcon/>} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"A shared custom symbol repeats across the scale, with a separate empty symbol."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":0,"label":"0 — No pain","annotation":"🙂"},{"value":1,"label":"1 of 10 pain","annotation":null},{"value":2,"label":"2 — Mild pain","annotation":"😐"},{"value":3,"label":"3 of 10 pain","annotation":null},{"value":4,"label":"4 — Moderate pain","annotation":"🙁"},{"value":5,"label":"5 of 10 pain","annotation":null},{"value":6,"label":"6 — Strong pain","annotation":"😣"},{"value":7,"label":"7 of 10 pain","annotation":null},{"value":8,"label":"8 — Severe pain","annotation":"😫"},{"value":9,"label":"9 of 10 pain","annotation":null},{"value":10,"label":"10 — Extreme pain","annotation":"😭"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How much pain are you experiencing?"} variant="numbers" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="selected" highlightAppearance="background" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false} description={"Illustrative host-defined 0–10 scale: icons label even values above the number buttons; all 0–10 numbers are selectable. Only the chosen level is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Very dissatisfied","icon":"😞"},{"value":2,"label":"Dissatisfied","icon":"🙁"},{"value":3,"label":"Neutral","icon":"😐"},{"value":4,"label":"Satisfied","icon":"🙂"},{"value":5,"label":"Very satisfied","icon":"😄"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="icons" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="selected" layout="inline" showOptionLabels={true} clearable disabled={false} readOnly={false} invalid={false} description={"Each answer has its own host-supplied icon and label. Only the selected answer is highlighted."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
import {SchoolIcon} from '@structured-growth/sg-ui/icons';
export default function RatingExampleExample() {
const options=[{value:1,label:"1 learning symbol",icon:<><SchoolIcon/></>},{value:2,label:"2 learning symbols",icon:<><SchoolIcon/><SchoolIcon/></>},{value:3,label:"3 learning symbols",icon:<><SchoolIcon/><SchoolIcon/><SchoolIcon/></>},{value:4,label:"4 learning symbols",icon:<><SchoolIcon/><SchoolIcon/><SchoolIcon/><SchoolIcon/></>},{value:5,label:"5 learning symbols",icon:<><SchoolIcon/><SchoolIcon/><SchoolIcon/><SchoolIcon/><SchoolIcon/></>}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="icons" options={options} optionLayout="stacked" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="selected" layout="inline" showOptionLabels={true} clearable disabled={false} readOnly={false} invalid={false} description={"One through five learning icons per answer. Each icon group still represents one numeric answer."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
import {StarIcon} from '@structured-growth/sg-ui/icons';
export default function CustomVectorRatingExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label="Rate the material" variant="icons" icon={<StarIcon/>} emptyIcon={<StarIcon strokeWidth={1}/>} value={value} onValueChange={setValue} clearable/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(3);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightAppearance="background" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(3);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightAppearance="both" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(3);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" highlightMode="selected" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(4);
return (
<>
<Rating label={"How helpful was this session?"} variant="stars" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={true} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const [value,setValue]=useState<number|null>(3);
return (
<>
<Rating label={"How helpful was this session?"} variant="numbers" max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={true} readOnly={false} invalid={false}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Rating} from '@structured-growth/sg-ui/primitives';
export default function RatingExampleExample() {
const options=[{"value":1,"label":"Very dissatisfied"},{"value":2,"label":"Dissatisfied"},{"value":3,"label":"Neutral"},{"value":4,"label":"Satisfied"},{"value":5,"label":"Very satisfied"}];
const [value,setValue]=useState<number|null>(null);
return (
<>
<Rating label={"How helpful was this session?"} variant="labels" options={options} max={5} value={value} onValueChange={setValue} density="comfortable" orientation="horizontal" appearance="outlined" layout="inline" showOptionLabels={false} clearable disabled={false} readOnly={false} invalid={true} description={"The host owns any additional rules."} errorMessage="Confirm your answer."/>
</>
);
}
'use client';
import { useState } from 'react';
import { Provider } from '@structured-growth/sg-ui/theme';
import {Rating} from '@structured-growth/sg-ui/primitives';
import {SGTranslationProvider,formatIcuMessage} from '@structured-growth/sg-ui';
export default function ArabicRatingExample() {
const [value,setValue]=useState<number|null>(null);
return (
<>
<SGTranslationProvider value={{locale:"ar-SA",t:(_key,options)=>formatIcuMessage(options.defaultMessage,"ar-SA",options.values),useNamespace:()=>{}}}><Provider><Rating label="تقييم الجلسة" variant="numbers" value={value} onValueChange={setValue} clearable/></Provider></SGTranslationProvider>
</>
);
}
An unanswered rating submits no value. The native form requires a choice. Reviewing creates a local draft; persistence belongs to the host.
'use client';
import { useState } from 'react';
import {Rating,Stack,Button,Typography} from '@structured-growth/sg-ui/primitives';
export default function FeedbackFormExample() {
const [result,setResult]=useState("");
return (
<>
<form onSubmit={event=>{event.preventDefault();const data=new FormData(event.currentTarget);setResult(`Feedback draft: ${data.get("rating")} / 5.`);}} onReset={()=>setResult("")}><Stack gap={3}><Rating label="Session feedback" name="rating" required clearable description="Choose one rating before reviewing your feedback." errorMessage="Choose a rating."/><Stack direction="row" gap={2}><Button type="submit">Review feedback</Button><Button type="reset" variant="outlined">Reset feedback</Button></Stack>{result&&<Typography role="status">{result}</Typography>}</Stack></form>
</>
);
}