A moment to check in
Before your session
You can change or clear your answer.
Check-in
Collects one supplied text answer with native radio controls, 44px targets, and an explicit unanswered state.
Preview
In action
When to use
Use it for
- A daily mood, comfort, or energy check-in with application-owned wording.
- Unique option values and explicit labels for every answer.
- value, defaultValue, and onValueChange with null for an unanswered check-in; name and form submit the selected string.
Not for
- Inventing a clinical questionnaire, diagnostic interpretation, or score from the selected position.
- Treating an unanswered check-in as a negative answer.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { CheckIn } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/check-in.
2. Vendor the source
npx @noorddev/vlak-cli add check-in
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/check-in.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { CheckIn } from "@noorddev/vlak-react";
<CheckIn label="How is your energy?" description="Choose the answer that fits right now." name="energy" options={[{ value: "low", label: "Low" }, { value: "steady", label: "Steady" }, { value: "high", label: "High" }]} defaultValue={null} />Props
CheckIn
A named text choice without an inferred clinical score.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | ||
description | ReactNode | ||
optionsrequired | CheckInOption[] | Text answers supplied by the application. Values must be unique. | |
value | string | null | null is an unanswered check-in. | |
defaultValue | string | null | null | |
onValueChange | (value: string | null) => void | ||
required | boolean | ||
readOnly | boolean | false | |
clearable | boolean | true | |
clearLabel | string | "Clear answer" |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves into the native radio group and then to the available clear action. |
| Arrow keys, Space | Uses native radio selection; read-only answers prevent changes. |
| Enter, Space | Activates the focused clear action. |
Accessibility
- A fieldset and legend name the answer group; native radios use visible text labels and share a name.
- Every answer covers at least 44px in each dimension, with a focus ring and full-fill selection. Vlak Button supplies the optional clear action.
- Descriptions reach the group and each answer. Read-only controls retain the submitted value and announce their unavailable state.
- Disabled controls do not submit; required uses native radio validation. Form reset restores uncontrolled defaults and preserves controlled values.
- The forwarded ref reaches the fieldset; native fieldset attributes, className, and style pass through.
Markup
<fieldset class="rs-check-in"><legend class="rs-check-in-legend">How is your energy?</legend><p class="rs-check-in-description">Choose the answer that fits right now.</p><div class="rs-check-in-choices"><label class="rs-check-in-choice"><span>Low</span><input class="rs-check-in-input" type="radio" name="energy" value="low" /></label><label class="rs-check-in-choice rs-check-in-selected"><span>Steady</span><input class="rs-check-in-input" type="radio" name="energy" value="steady" checked /></label><label class="rs-check-in-choice"><span>High</span><input class="rs-check-in-input" type="radio" name="energy" value="high" /></label></div><button class="rs-btn-ghost rs-btn-sm rs-check-in-clear" type="button">Clear answer</button></fieldset>
Classes
.rs-check-in.rs-check-in-legend.rs-check-in-description.rs-check-in-choices.rs-check-in-choice.rs-check-in-selected.rs-check-in-unavailable.rs-check-in-input.rs-check-in-clear