# Rating Group
Rating Group allows users to rate something
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Half Step
Set the `allowHalf` prop to enable half steps.
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Half() {
return (
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Custom Icons
Insert your own custom images or icons for the `empty` and `full` states.
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
import { BoneIcon, SkullIcon } from 'lucide-react';
export default function CustomIcons() {
return (
{(ratingGroup) =>
ratingGroup.items.map((index) => } full={} />)
}
);
}
```
## Label
Use the `Label` component to describe the intended usage.
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Label() {
return (
Rate us:
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Disabled
Set the `disabled` prop to enable the disabled state.
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Page() {
return (
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Label
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Anatomy
Here's an overview of how the RatingGroup component is structured in code:
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference