# Mood Picker

> A five-step mood scale with faces and words, as a radio group.

Component · Life · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/MoodPicker/)

A five-step mood scale with faces and words, as a radio group.

- `value` / `onChange` with levels 1 (lowest) to 5; `levels` replaces the five words.
- `compact` shows only the faces; the words stay as accessible names.
- The picked level takes its tint and a ring, so it never depends on colour alone.

## Example

```tsx
import * as React from "react";
import { Card, MoodPicker } from "@twentyfirstmedia/halo";
import type { MoodLevel } from "@twentyfirstmedia/halo";

export default function Preview() {
  const [mood, setMood] = React.useState<MoodLevel | null>(4);
  return (
    <div className="tf-row" style={{ gap: 24, flexWrap: "wrap", alignItems: "flex-start" }}>
      <Card style={{ width: 420, minHeight: 0 }}>
        <MoodPicker value={mood} onChange={setMood} />
      </Card>
      <Card style={{ width: 280, minHeight: 0 }}>
        <MoodPicker label="Energy today" compact defaultValue={3} />
      </Card>
    </div>
  );
}
```

## Props

### MoodPicker

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `MoodLevel \| null` |  |
| `defaultValue?` | `MoodLevel \| null` |  |
| `onChange?` | `(mood: MoodLevel) => void` |  |
| `label?` | `ReactNode` | The question (default "How are you feeling?"). |
| `levels?` | `[string, string, string, string, string]` | Words for the five levels, lowest first (default Awful, Low, Okay, Good, Great). |
| `compact?` | `boolean` | Only the faces; the words stay as accessible names. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Card

| Prop | Type | Notes |
| --- | --- | --- |
| `title?` | `string` |  |
| `description?` | `string` |  |
| `meta?` | `string[]` |  |
| `corner?` | `ReactNode` |  |
| `status?` | `ReactNode` |  |
| `actions?` | `ReactNode[]` |  |
| `tint?` | `Tint \| "surface"` |  |
| `onClick?` | `() => void` |  |
| `children?` | `ReactNode` |  |
| `eyebrow?` | `ReactNode` |  |
| `surface?` | `Surface` | `"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |