MoodOption

Stable
WCAG 2.2 evidence
RTL

One mood of a quick check-in: a face over its label. Render it inside a {@link MoodOptionGroup }, which owns the selection. Built on React Aria RadioField + RadioButton: a radio named by its visible label, so the mood is never told by the face or the colour alone (WCAG 1.1.1, 1.4.1, 2.5.3). The chosen option gains a border and a tinted fill; the target is 72 x 78 px (2.5.8). Keyboard focus shows the focus ring (2.4.7).

import { MoodOption } from "@nexera-ui/react";

Loading example…

4
examples: 16
props: 3
live controls: 1
platform: 8
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

mood

label

isDisabledfalse

Generated code

import { MoodOption } from "@nexera-ui/react";

<MoodOption />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

Group

The five moods in a MoodOptionGroup with a visible question. Use the arrow keys to move and select.

Loading example…

app.tsx

import { MoodOptionGroup } from "@nexera-ui/react";

export function Group() {
  return <MoodOptionGroup label="How was your week?" defaultValue="good" name="mood" />;
}

Long labels

Translated labels wrap under the face.

Loading example…

app.tsx

import { MoodOption, MoodOptionGroup } from "@nexera-ui/react";

export function LongLabels() {
  return (
    <MoodOptionGroup label="¿Cómo fue tu semana?">
      <MoodOption mood="very-bad" label="Muy mala" />
      <MoodOption mood="bad" label="Mala" />
      <MoodOption mood="okay" label="Más o menos aceptable" />
      <MoodOption mood="good" label="Buena" />
      <MoodOption mood="great" label="Excelente" />
    </MoodOptionGroup>
  );
}

Right to left

Right-to-left: "Very bad" is on the right; arrow keys follow the reading direction.

Loading example…

app.tsx

import { MoodOption, MoodOptionGroup } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <MoodOptionGroup label="كيف كان أسبوعك؟" defaultValue="good">
      <MoodOption mood="very-bad" label="سيئ جدا" />
      <MoodOption mood="bad" label="سيئ" />
      <MoodOption mood="okay" label="مقبول" />
      <MoodOption mood="good" label="جيد" />
      <MoodOption mood="great" label="ممتاز" />
    </MoodOptionGroup>
  );
}

Props 16

Press "Try it" on a card to load that prop into the playground.

moodNexera

"very-bad" | "bad" | "okay" | "good" | "great"

The mood. It is also the option's value in the {@link MoodOptionGroup }.

labelNexera

ReactNode

Visible label and accessible name. Translate it.

classNameNexera

string

Extra classes for the option (the label element that wraps the radio), merged last.

styleNexera

CSSProperties

Inline style for the option.

isDisabledReact Aria

boolean

Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

inputRefReact Aria

Ref<HTMLInputElement | null>

A ref for the HTML input element.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 2 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-readonly
data-selected

Usage

<MoodOption className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Mood check-inFeedback and surveys

Theme studio

MoodOption

Try every prop. Copy the code.

Examples 3

Group

Long labels

Right to left

Props 16

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components