shadcn.io is not affiliated with official shadcn/ui
Mood Check Dialog Block for Solid
A mood journal's home with a check-in dialog shown open: five faces from Rough to Great, tags for what is behind the mood, an optional note of 200 characters, and a week strip that fills in today's cell.
Installation
Overview
Let people log how they feel in a few seconds, with this mood check dialog for Solid with Ark UI. It opens from the Journal of Daydrift, a mood journal: the page's header holds an outline Log mood Button, and the journal home, a How are you today? card over a week strip, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog holds five faces from Rough to Great, drawn from icons with the name under each, as one choice you move through with the arrow keys; the chosen face turns solid. Under them a Toggle Group takes what is behind the mood, any of Sleep, Work, People, Health and Weather, and a Textarea takes an optional note of up to 200 characters, with a counter that is only spoken at 20, 10 and 0 left. Log mood, the only Shine Button, fills today's cell in the drawn week strip with the face and the tags. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog, with the same faces and the same state. For journals, wellbeing apps, team check-ins and any app that asks how someone is.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Log mood button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same MoodFields component and share the block's state, so a face picked in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How do the faces work, and why are they not emoji?
Each face is an icon from the icon set in the current text colour, so it follows the theme, and the name under it (Rough, Low, Okay, Good, Great) is what a screen reader hears. They are native radio buttons in one radio group, so Tab enters the group once and the arrow keys move and choose, in either text direction. The chosen face is solid foreground, never the primary colour, which stays on Log mood. Pressing Log mood before choosing says "Pick how you feel first." in a slot that is always there and puts focus on the faces.
How do the tags and the note work?
Both are optional and independent of the face. The tags are a multiple-choice group, each a toggle that turns solid when it is on, and they wrap onto a second line on a narrow phone without changing the dialog's height. The note stops at 200 characters (the field refuses more); the visible count is hidden from assistive technology and a polite message says "20 characters left", "10 characters left" or "No characters left." only as each stage is crossed, never on every key.
What does Log mood change on the page?
Today's cell in the drawn week strip: it shows the chosen face and, from the small breakpoint up, the tags, and the card above it says "Logged: Good, Sleep and Work". Monday to Thursday hold typed faces, Friday is today and the weekend is empty, all from one fixed day so the preview never ages. The header button then reads Update mood, and the dialog reopens on what was logged; Cancel and Escape drop anything you changed without logging.
Does it save anything, and how do I wire it up?
No. The entry lives in this tab and a polite message says "Logged Good for today, in this demo" and "Nothing was saved or sent". In your app send { mood, tags, note } from log, take the saved entry from the response and show it in the strip. Mood data is sensitive: keep it encrypted, let people export and delete it, and don't share it without consent.
Is it accessible from the keyboard?
Yes. The real dialog is named by its question and described by its sentence, focus starts on the faces and stays inside until it closes, and Escape, Cancel and the close button all return focus to the header button. The trigger is the button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The tags are a group you move through with the arrow keys, the note has a visible label, and one polite status message reports what changed. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.