Repository navigation
feat(controls): add check and inline-check control types - #972
Merged
Merged
Conversation
Storybook's web Controls panel supports `control: 'check'` and `control: 'inline-check'` for args that take any number of options, but the on-device controls addon had no mapping for them, so those argTypes rendered "Invalid type: check" on device. Add a `Check` control backed by a new `CheckboxSelect` component, styled like the existing radio control (vertical list, or a wrapping row for `inline-check`), with `accessibilityRole="checkbox"` and the checked state for screen readers. It follows the web check control: - `options` can be an array or a label -> value object, also read from `control.options`, and `control.labels` maps values to the text shown. - The arg is set to an array of the checked values. Values are kept in the order of `options`, so the result doesn't depend on tap order. - A missing value means nothing is checked, a single value checks that option, and values that aren't options are dropped. - The selection is kept locally and resynced when the arg changes from outside, so several quick taps aren't lost while the previous update is still going through an async (websocket) channel. The expo example gets `ControlExamples/Check` stories (CSF and CSF factories) and tests that render the control through `PropField` and cover checking, unchecking, quick consecutive taps, resyncing, labels, missing and single values and `inline-check`. The example now lists `@storybook/react-native-theming` as a dev dependency so the tests can wrap the control in a ThemeProvider. Docs and the stories skill reference describe the new control types. Closes storybookjs#541
🦋 Changeset detectedLatest commit: bf4d295 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codex Review Summary: ❌ FailedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
* chore: update to Storybook 11.0.0-beta.3 * chore: restore storybook.requires.ts
…value (storybookjs#965) Co-authored-by: Daniel Williams <dannyhyunsoowilliams@gmail.com>
…ive into t3/align-checkbox-web
- Track the checked option labels, like web's normalizeOptions / selectedKeys / selectedValues, so options sharing a label collapse into one checkbox (last value wins) and options sharing a value are toggled independently. - Emit values in the order they were checked instead of re-sorting them into options order. - Warn and render "-" when the argType has no options, and stop falling back to control.options, which web never reads. - Disable and dim every checkbox when argType.table.readonly is set. A single non-array value still checks only the option equal to it, not options it contains as a substring.
dannyhw
approved these changes
Nov 14, 2026
dannyhw
left a comment
dannyhw
left a comment
Member
There was a problem hiding this comment.
I pushed one commit on top to bring the control closer to the web check control:
- checking an option appends its value to the array instead of sorting the array into
optionsorder - options come from
argType.optionsonly, without thecontrol.optionsfallback, which web doesn't read - an argType with no options renders
-and logs a warning table: { readonly: true }disables the checkboxes
Checked on iOS and Android.
dannyhw
added a commit
that referenced
this pull request
Nov 14, 2026
Port the check/inline-check control (#972) and the number control fix (#965) to the built-in controls in packages/react-native/src/controls. Move the check control's PropField tests into @storybook/react-native, since PropField is no longer reachable from the addon-ondevice-controls stub, and retarget the check-control and number-control changesets to @storybook/react-native.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue: #541
What I did
Storybook's web Controls panel has
checkandinline-checkcontrols for args that take any number of options, but the on-device controls addon had no mapping for them, so those argTypes showed "Invalid type: check" on device. This adds both, so the sameargTypeswork on web and on device.types/Check.tsx(new): thecheck/inline-checkcontrol. It follows the web check control:optionscan be an array or a label → value object (also read fromcontrol.options), andcontrol.labelsmaps values to the text shown.options, so the result doesn't depend on tap order.'bold'instead of['bold']) checks that option, and values that aren't options are dropped.components/CheckboxSelect.tsx(new): the checkbox list, styled likeRadioSelect(same row height, hit slop, label and colours, a wrapping row forinline-check). Each row hasaccessibilityRole="checkbox"and its checked state.types/index.ts/sharedTypes.ts: mapcheckandinline-checkto the new control.ControlExamples/Checkstories (Basic,Inline,WithLabels) plus a CSF factories story.checkandinline-checksections in the controls addon docs and the stories skill reference.@storybook/addon-ondevice-controls.Tests (
Check.test.tsx,Check.factories.test.tsx) render the stories, and render the control throughPropFieldwith the argTypes fromgetControlArgTypes. They cover:inline-checkWithout the mapping, all the control tests fail. To wrap the control in a
ThemeProvider, the example now lists@storybook/react-native-themingas a dev dependency. That's the one-linepnpm-lock.yamlchange.I didn't add the new stories to the WebCompatibility stories or the maestro screenshot flow, since that would change the committed baselines.
If #960 lands first, this moves over as-is: the control is two new files plus two lines in the type map.
Screenshots
These are from the expo example's web export at a phone-sized viewport. The control is built only from React Native views, with no web-specific branch.
checkinline-checklabelscheck(dark)inline-check(dark)How to test
pnpm build pnpm --filter expo-example test -- components/ControlExamples/CheckI ran
pnpm build,pnpm lint,pnpm format:check,pnpm --filter expo-example check,check:typesfor the controls addon and the fullpnpm test, and all passed. I also exported the example for web and used the Controls panel of the new stories in a headless browser: tapping a checkbox updated the story.To try it on device, run
pnpm exampleand open ControlExamples / Check. The Basic, Inline and With Labels stories show the controls in the Controls panel.