Skip to content
Twentyfirst UIHalo

Mood Picker

Life · MoodPicker, Card

View as Markdown

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.
How are you feeling?
Energy today

Props

MoodPicker

PropTypeNotes
value?MoodLevel | null
defaultValue?MoodLevel | null
onChange?(mood: MoodLevel) => void
label?ReactNodeThe 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?booleanOnly the faces; the words stay as accessible names.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Card

PropTypeNotes
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?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.