Add component library integration guides for all supported frameworks - #195
Conversation
…t Aria Each guide follows the structure of the shadcn/ui guide and documents the verified wiring for text inputs, checkboxes, selects, radio groups and sliders, including error display and the full field lifecycle. Every example was typechecked and exercised in a browser against a real scaffold per library. Notable library specifics that are documented rather than worked around: - Mantine forwards refs to native elements, so most fields take the plain `field.props` spread and its universal `error` prop - Chakra UI and Base UI expose hidden native parts that accept the field ref and redirect focus to the visible control - React Aria only accepts ref objects, so the guide introduces a small bridge, and its `Select` has no native element that `focus` can target
Add a porting table that records how the field contract is spelled in each framework: the form and field API, the native binding idiom, the name of the programmatic setter and the casing of the lifecycle props. Also document the React Native variant of the guide structure, since it has no Form component, a reduced set of field props, touch handling on press and a different accessibility model.
Cover Kobalte and Ark UI for Solid, Bits UI and shadcn-svelte for Svelte,
Reka UI, PrimeVue and shadcn-vue for Vue, and React Native Paper and
gluestack-ui for React Native.
Every example was typechecked, production built and exercised in a browser
against a real scaffold per library, so each guide documents behavior that
was measured rather than assumed. The traps worth knowing:
- React Native must import everything from `@formisch/react-native`, since
adding `@formisch/methods/react-native` loads a second copy of the
reactive core and freezes newly inserted field array rows
- In Svelte, `bind:value={field.input}` compiles and typechecks but throws
at runtime, because the input is a getter rather than a state reference
- In Vue, spreading the field props onto a component registers the
component instance instead of an element, which breaks `focus`
- In Solid, the props handler reads its value from the element and always
yields a string, so numeric and enum controls use the library callback
Vue had no component library section in its input components and controlled
fields guides, so both were added in its own `v-model` idiom.
dosubot
Bot
added
size:XXL
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughExpanded the documentation skill with portable field-contract and React Native guidance. Added integration guides for component libraries across React, React Native, Solid, Svelte, and Vue. Added setup, field wiring, controlled values, validation, accessibility, focus handling, and form-control examples. Added links to the new guides in advanced guides, input-component pages, and framework menus. Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7b13322429
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Pull request overview
This PR expands the Formisch website documentation by adding UI component-library integration guides across multiple supported frameworks (React, Solid, Svelte, Vue, React Native), and wires these guides into each framework’s navigation and “input components / controlled fields” learning paths.
Changes:
- Add new integration-guide pages for multiple UI libraries across Vue, Svelte, Solid, React, and React Native.
- Update framework menus and relevant conceptual guides to link to the new integration guides.
- Update the repository authoring skill to generalize the integration-guide guidance (including a framework “porting table”).
Reviewed changes
Copilot reviewed 29 out of 29 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| website/src/routes/(docs)/vue/guides/menu.md | Adds Vue integration-guides section to the menu. |
| website/src/routes/(docs)/vue/guides/(main-concepts)/input-components/index.mdx | Adds Vue-specific guidance and links for component-library wiring. |
| website/src/routes/(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdx | New Vue integration guide for shadcn-vue. |
| website/src/routes/(docs)/vue/guides/(integration-guides)/reka-ui/index.mdx | New Vue integration guide for Reka UI. |
| website/src/routes/(docs)/vue/guides/(integration-guides)/primevue/index.mdx | New Vue integration guide for PrimeVue. |
| website/src/routes/(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdx | Adds Vue “component libraries” section and integration-guide links. |
| website/src/routes/(docs)/svelte/guides/menu.md | Adds Svelte integration-guides section to the menu. |
| website/src/routes/(docs)/svelte/guides/(main-concepts)/input-components/index.mdx | Adds Svelte integration-guide links from input-components. |
| website/src/routes/(docs)/svelte/guides/(integration-guides)/shadcn-svelte/index.mdx | New Svelte integration guide for shadcn-svelte. |
| website/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx | New Svelte integration guide for Bits UI. |
| website/src/routes/(docs)/svelte/guides/(advanced-guides)/controlled-fields/index.mdx | Adds Svelte integration-guide links from controlled-fields. |
| website/src/routes/(docs)/solid/guides/menu.md | Adds Solid integration-guides section to the menu. |
| website/src/routes/(docs)/solid/guides/(main-concepts)/input-components/index.mdx | Adds Solid integration-guide links from input-components. |
| website/src/routes/(docs)/solid/guides/(integration-guides)/kobalte/index.mdx | New Solid integration guide for Kobalte. |
| website/src/routes/(docs)/solid/guides/(integration-guides)/ark-ui/index.mdx | New Solid integration guide for Ark UI. |
| website/src/routes/(docs)/solid/guides/(advanced-guides)/controlled-fields/index.mdx | Adds Solid integration-guide links from controlled-fields. |
| website/src/routes/(docs)/react/guides/menu.md | Expands React integration guides menu list beyond shadcn/ui. |
| website/src/routes/(docs)/react/guides/(main-concepts)/input-components/index.mdx | Adds React integration-guide links from input-components. |
| website/src/routes/(docs)/react/guides/(integration-guides)/react-aria/index.mdx | New React integration guide for React Aria Components. |
| website/src/routes/(docs)/react/guides/(integration-guides)/mantine/index.mdx | New React integration guide for Mantine. |
| website/src/routes/(docs)/react/guides/(integration-guides)/chakra-ui/index.mdx | New React integration guide for Chakra UI. |
| website/src/routes/(docs)/react/guides/(integration-guides)/base-ui/index.mdx | New React integration guide for Base UI. |
| website/src/routes/(docs)/react/guides/(advanced-guides)/controlled-fields/index.mdx | Adds React integration-guide links from controlled-fields. |
| website/src/routes/(docs)/react-native/guides/menu.md | Adds React Native integration-guides section to the menu. |
| website/src/routes/(docs)/react-native/guides/(main-concepts)/input-components/index.mdx | Adds React Native integration-guide links from input-components. |
| website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx | New React Native integration guide for React Native Paper. |
| website/src/routes/(docs)/react-native/guides/(integration-guides)/gluestack-ui/index.mdx | New React Native integration guide for gluestack-ui. |
| website/src/routes/(docs)/react-native/guides/(advanced-guides)/controlled-fields/index.mdx | Adds React Native integration-guide links from controlled-fields. |
| .agents/skills/repo-website-integration-guide-create/SKILL.md | Updates the integration-guide authoring skill and adds a porting table / React Native-specific guidance. |
Suppressed comments (5)
website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx:54
- This sentence contradicts the React Native input-components guide in this repo (“React Native has no equivalent of the
aria-invalidattribute”). Update it to recommendaccessibilityState.invalidinstead ofaria-invalid.
Paper's `error` prop only changes the styling, so set `aria-invalid` as well to expose the state to assistive technology.
website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx:89
- React Native does not support HTML ARIA attributes like
aria-invalid; useaccessibilityState={{ invalid: ... }}for native accessibility instead.
aria-invalid={!!field.errors}
website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx:146
- React Native does not support HTML ARIA attributes like
aria-invalid; useaccessibilityState={{ invalid: ... }}for native accessibility instead.
aria-invalid={!!field.errors}
website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx:167
- React Native does not support HTML ARIA attributes like
aria-invalid; useaccessibilityState={{ invalid: ... }}for native accessibility instead.
aria-invalid={!!field.errors}
website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx:227
- React Native does not support HTML ARIA attributes like
aria-invalid; useaccessibilityState={{ invalid: ... }}for native accessibility instead.
aria-invalid={!!field.errors}
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (4)
website/src/routes/(docs)/vue/guides/(integration-guides)/reka-ui/index.mdx (1)
344-346: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove the unreferenced label id, or point the thumb at it.
Line 345 renders
<label id="settings-volume-label">Volume</label>. The label has noforattribute, and no element referencessettings-volume-label. The thumb is named througharia-label="Volume"instead, so the id is dead markup. Either drop the id or replacearia-labelwitharia-labelledby="settings-volume-label"onSliderThumb.♻️ Proposed cleanup
- <label id="settings-volume-label">Volume</label> + <span id="settings-volume-label">Volume</span> <SliderRoot :name="field.props.name" :model-value="[field.input ?? 0]" @@ <SliderThumb id="settings-volume" :ref="elementRef(field.props.ref)" :autofocus="field.props.autofocus" - aria-label="Volume" + aria-labelledby="settings-volume-label"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/vue/guides/(integration-guides)/reka-ui/index.mdx around lines 344 - 346, Remove the unused settings-volume-label id from the Volume label, or update SliderThumb to reference it with aria-labelledby instead of aria-label; ensure the volume control retains accessible labeling without leaving dead markup.website/src/routes/(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdx (1)
165-171: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAlign the inline ref callback with the
elementRefhelper used in the integration guides.
instance?.$el ?? instanceaccesses$elwithout narrowing. In a typed Vue template the:refparameter isElement | ComponentPublicInstance | null, andElementhas no$el, sovue-tscreports an error on this snippet. The three guides linked directly below (shadcn-vue, Reka UI, PrimeVue) all narrow with'$el' in instancefor this reason. Readers copy this page first, so it should not be the one snippet that fails to typecheck.Consider showing the same helper shape here.
♻️ Proposed alignment with the integration guides
+<script setup lang="ts"> +import type { ComponentPublicInstance } from 'vue'; + +function elementRef(register: (element: Element | null) => void) { + return (instance: Element | ComponentPublicInstance | null) => + register( + instance && '$el' in instance + ? ((instance as ComponentPublicInstance).$el as Element | null) + : (instance as Element | null) + ); +} +</script> + <template> <Field :of="form" :path="['date']" v-slot="field"> <DatePicker - :ref="(instance) => field.props.ref(instance?.$el ?? instance)" + :ref="elementRef(field.props.ref)" :name="field.props.name" v-model="field.input" `@focus`="field.props.onFocus" `@blur`="field.props.onBlur" /> </Field> </template>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdx around lines 165 - 171, Update the inline ref callback in the DatePicker example to narrow the ref value with a '$el' in instance check before accessing $el, matching the elementRef helper pattern used by the shadcn-vue, Reka UI, and PrimeVue guides while preserving the existing fallback for elements and other instances.website/src/routes/(docs)/vue/guides/(integration-guides)/primevue/index.mdx (1)
302-331: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueReconcile the
<label for>with the stated naming behavior.Line 303 states that a
<label>cannot name the combobox span, and the snippet therefore setsaria-label="Framework". The snippet still renders<label for="project-framework">together withlabel-id="project-framework". If the label cannot name the control, thatforattribute is inert markup and readers may copy it as if it worked. Either drop theforattribute or explain why it stays.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/vue/guides/(integration-guides)/primevue/index.mdx around lines 302 - 331, Update the PrimeVue `<Select>` example so the `<label>` does not imply native naming via `for="project-framework"` when the combobox is named by `aria-label`. Remove the label’s `for` attribute, or explicitly explain its retained purpose while keeping `aria-label="Framework"` as the accessible name.website/src/routes/(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdx (1)
384-390: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueNote the multi-thumb caveat for the
thumbPropsspread.
v-bind="props.thumbProps"runs insidev-for, so every thumb receives the same object. With the wiring at lines 403-412 that means a duplicatedid, a duplicatedaria-errormessage, and the samerefcallback registered once per thumb. The example uses a single value, so the output is correct there. A reader who moves to a range slider gets duplicate ids and repeated ref registrations without warning.Add one sentence that scopes
thumbPropsto the single-thumb case.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdx around lines 384 - 390, Add a concise caveat near the SliderThumb example stating that props.thumbProps is intended for single-thumb sliders only; range or multi-thumb sliders must provide unique per-thumb ids, ARIA attributes, and refs rather than spreading the same object in the v-for.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/base-ui/index.mdx:
- Around line 357-373: Update the slider labeling in the Base UI example around
Slider.Root so the accessible name reaches the hidden input: replace the
external BaseField.Label association with Slider.Label integrated into the
field’s error-handling pattern, or apply the label directly via aria-label on
each Slider.Thumb when retaining the visible field label.
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/chakra-ui/index.mdx:
- Around line 365-371: Update the Chakra UI example’s Slider.HiddenInput within
Slider.Thumb to receive field.props.ref. In
website/src/routes/(docs)/react/guides/(integration-guides)/mantine/index.mdx:298-308,
do not attach field.props.ref directly to Mantine’s Slider; document that
focus() is unavailable or demonstrate a custom slider/hook approach that maps
the ref to the thumb.
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/react-aria/index.mdx:
- Around line 308-313: Update the Select example to use the React Aria
Components v1 controlled API: replace selectedKey with value and
onSelectionChange with onChange, preserving the existing field input and
change-handler behavior. Keep the value conversion compatible with the field’s
expected type and align the example with the unpinned react-aria-components
dependency.
In
`@website/src/routes/`(docs)/solid/guides/(integration-guides)/kobalte/index.mdx:
- Around line 381-409: Update the Slider.Input accessibility handling in the
Field example: do not leave the focusable native input marked aria-hidden.
Remove aria-hidden while keeping it exposed, or make the input non-focusable and
transfer the forwarded focus behavior to Slider.Thumb; preserve a single
accessible slider role.
In
`@website/src/routes/`(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx:
- Around line 312-316: Update the RadioGroup.Root value in
website/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx:312-316
and
website/src/routes/(docs)/svelte/guides/(integration-guides)/shadcn-svelte/index.mdx:305-309
so the displayed default is also stored in the form; either initialize plan in
initialInput and pass field.input directly, or replace the hobby fallback with
an empty value while preserving the existing onValueChange handling.
- Around line 273-277: Update the Select examples in
website/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx#L273-L277
and
website/src/routes/(docs)/svelte/guides/(integration-guides)/shadcn-svelte/index.mdx#L271-L275
to convert the cleared `''` value to `undefined` before passing it to
`field.onInput`, rather than casting it directly to the option union. In both
snippets, define the `frameworks` collection above the Select.Root usage
following the Ark UI guide’s definition.
In
`@website/src/routes/`(docs)/vue/guides/(integration-guides)/primevue/index.mdx:
- Line 109: Hyphenate the compound modifiers in the three Vue integration
guides: in
website/src/routes/(docs)/vue/guides/(integration-guides)/primevue/index.mdx at
lines 109, 14, and 404, update “JSON encoded path,” “full featured,” “pass
through API,” and “resolver based validation”; in
website/src/routes/(docs)/vue/guides/(integration-guides)/reka-ui/index.mdx at
lines 97 and 375, update “JSON encoded path” and “button based primitive”; and
in
website/src/routes/(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdx
at lines 14 and 109, update “Reka UI v2 based components” and “JSON encoded
path” to their hyphenated forms.
- Around line 368-400: Correct the PrimeVue Slider example’s accessibility
guidance: keep input-id="settings-volume" on Slider for label association, but
remove the claim that the slider role is on a native range input and stop
routing focus handlers through pt.input. Attach field.props.onFocus and
field.props.onBlur to the appropriate handle/root pt element, and ensure those
focus events update touched state when required by field.props.onChange.
In
`@website/src/routes/`(docs)/vue/guides/(main-concepts)/input-components/index.mdx:
- Around line 153-169: Update the DatePicker ref guidance in the Vue
component-library example so field.props.ref receives the actual focusable input
element via the component or library-specific ref API, rather than instance?.$el
or the component instance. If DatePicker cannot expose that element, state that
programmatic focus is unavailable instead of registering the root. Keep the
existing `@focus` and `@blur` forwarding unchanged.
---
Nitpick comments:
In
`@website/src/routes/`(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdx:
- Around line 165-171: Update the inline ref callback in the DatePicker example
to narrow the ref value with a '$el' in instance check before accessing $el,
matching the elementRef helper pattern used by the shadcn-vue, Reka UI, and
PrimeVue guides while preserving the existing fallback for elements and other
instances.
In
`@website/src/routes/`(docs)/vue/guides/(integration-guides)/primevue/index.mdx:
- Around line 302-331: Update the PrimeVue `<Select>` example so the `<label>`
does not imply native naming via `for="project-framework"` when the combobox is
named by `aria-label`. Remove the label’s `for` attribute, or explicitly explain
its retained purpose while keeping `aria-label="Framework"` as the accessible
name.
In `@website/src/routes/`(docs)/vue/guides/(integration-guides)/reka-ui/index.mdx:
- Around line 344-346: Remove the unused settings-volume-label id from the
Volume label, or update SliderThumb to reference it with aria-labelledby instead
of aria-label; ensure the volume control retains accessible labeling without
leaving dead markup.
In
`@website/src/routes/`(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdx:
- Around line 384-390: Add a concise caveat near the SliderThumb example stating
that props.thumbProps is intended for single-thumb sliders only; range or
multi-thumb sliders must provide unique per-thumb ids, ARIA attributes, and refs
rather than spreading the same object in the v-for.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 6a8523f7-ef98-4c45-b273-85220456f098
📒 Files selected for processing (29)
.agents/skills/repo-website-integration-guide-create/SKILL.mdwebsite/src/routes/(docs)/react-native/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/react-native/guides/(integration-guides)/gluestack-ui/index.mdxwebsite/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdxwebsite/src/routes/(docs)/react-native/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/react-native/guides/menu.mdwebsite/src/routes/(docs)/react/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/base-ui/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/chakra-ui/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/mantine/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/react-aria/index.mdxwebsite/src/routes/(docs)/react/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/react/guides/menu.mdwebsite/src/routes/(docs)/solid/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/solid/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/solid/guides/(integration-guides)/kobalte/index.mdxwebsite/src/routes/(docs)/solid/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/solid/guides/menu.mdwebsite/src/routes/(docs)/svelte/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdxwebsite/src/routes/(docs)/svelte/guides/(integration-guides)/shadcn-svelte/index.mdxwebsite/src/routes/(docs)/svelte/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/svelte/guides/menu.mdwebsite/src/routes/(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/primevue/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/reka-ui/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdxwebsite/src/routes/(docs)/vue/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/vue/guides/menu.md
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 29 files
Tip: cubic can generate docs of your entire codebase and keep them up to date. Try it here.
Re-trigger cubic
Ark UI publishes packages for React, Solid, Vue and Svelte, so it is the one library that spans most of the frameworks Formisch supports. Solid already had a guide, and these three complete the set. All four now cross-link each other. The Ark side of the wiring is identical everywhere, since the components share the same state machines, so the guides differ only where the framework does: - In React both the setter and the props handler are named `onChange`, which makes the distinction between storing a value and reading one off an element easy to miss, so the guide calls it out - In Vue every part is a component, so there is no props spread at all and the element reference always needs unwrapping, unlike the Reka UI guide - In Svelte the reference travels as an attachment under a symbol key, so it can only be spread, which inverts how the props are distributed The Svelte guide also places the focus handlers on the visible trigger and thumb rather than on the hidden input, because a keyboard user never lands on the hidden element and the field would otherwise stay untouched.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
website/src/routes/(docs)/react/guides/(integration-guides)/ark-ui/index.mdx (1)
336-366: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDefine or align the
PLANSandPLAN_LABELSidentifiers.The snippet uses
PLANSandPLAN_LABELS, which no example in this guide defines. The Svelte and Vue guides use a singleplansarray of{ value, label }objects for the same example. Use the same shape here so readers can move between the guides.Consider also passing
invalid={field.errors !== null}toRadioGroup.Root, as the Svelte guide does, instead of settingaria-invalidper item.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/react/guides/(integration-guides)/ark-ui/index.mdx around lines 336 - 366, Update the Ark UI example to define and use a single plans array of { value, label } objects, replacing the undefined PLANS and PLAN_LABELS identifiers while preserving the radio values and labels. Iterate over each plan object and use its value and label in RadioGroup.Item and RadioGroup.ItemText; also pass invalid={field.errors !== null} to RadioGroup.Root and remove the per-item aria-invalid setting.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/ark-ui/index.mdx:
- Line 313: Update the Ark UI guide examples at the error spans near
project-framework-error and the corresponding elements near lines 362 and 398 to
render only when field.errors is present, matching the conditional guards used
in the Svelte and Vue guides while preserving the existing error text and IDs.
- Around line 390-404: Move focus and blur handlers from the non-focusable
Slider.HiddenInput to Slider.Thumb while keeping value/name registration on the
hidden input; apply this in the React guide at lines 390-404 and Vue guide at
lines 424-439. Update the React guide end-note at lines 307-312 and Vue guide
end-note at lines 339-344 to document the same pattern for Select.Trigger and
Slider.Thumb, with registration remaining on Select.HiddenSelect and
Slider.HiddenInput.
In
`@website/src/routes/`(docs)/svelte/guides/(integration-guides)/ark-ui/index.mdx:
- Around line 296-299: Widen the select value casts to include all collection
values, angular, react, solid, and vue, in the Svelte guide at
website/src/routes/(docs)/svelte/guides/(integration-guides)/ark-ui/index.mdx:296-299,
the React guide at
website/src/routes/(docs)/react/guides/(integration-guides)/ark-ui/index.mdx:295-297,
and the Vue guide at
website/src/routes/(docs)/vue/guides/(integration-guides)/ark-ui/index.mdx:328-330;
do not reduce the four-item collections.
In `@website/src/routes/`(docs)/vue/guides/(integration-guides)/ark-ui/index.mdx:
- Line 445: Update the cross-framework links in the Ark UI Vue guide near the
existing React and Solid references to also include the Svelte guide, preserving
the current wording and link pattern.
---
Nitpick comments:
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/ark-ui/index.mdx:
- Around line 336-366: Update the Ark UI example to define and use a single
plans array of { value, label } objects, replacing the undefined PLANS and
PLAN_LABELS identifiers while preserving the radio values and labels. Iterate
over each plan object and use its value and label in RadioGroup.Item and
RadioGroup.ItemText; also pass invalid={field.errors !== null} to
RadioGroup.Root and remove the per-item aria-invalid setting.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 05ecbb5b-9a89-41cf-ab1a-6c15fddf30a5
📒 Files selected for processing (13)
website/src/routes/(docs)/react/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/react/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/react/guides/menu.mdwebsite/src/routes/(docs)/solid/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/svelte/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/svelte/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/svelte/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/svelte/guides/menu.mdwebsite/src/routes/(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/vue/guides/(main-concepts)/input-components/index.mdxwebsite/src/routes/(docs)/vue/guides/menu.md
🚧 Files skipped from review as they are similar to previous changes (10)
- website/src/routes/(docs)/react/guides/(main-concepts)/input-components/index.mdx
- website/src/routes/(docs)/react/guides/menu.md
- website/src/routes/(docs)/vue/guides/(main-concepts)/input-components/index.mdx
- website/src/routes/(docs)/vue/guides/menu.md
- website/src/routes/(docs)/svelte/guides/(main-concepts)/input-components/index.mdx
- website/src/routes/(docs)/react/guides/(advanced-guides)/controlled-fields/index.mdx
- website/src/routes/(docs)/svelte/guides/menu.md
- website/src/routes/(docs)/svelte/guides/(advanced-guides)/controlled-fields/index.mdx
- website/src/routes/(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdx
- website/src/routes/(docs)/solid/guides/(integration-guides)/ark-ui/index.mdx
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2a92f7b5e3
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
All reported issues were addressed across 13 files (changes from recent commits).
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
Fixes that came out of verifying each review comment against the libraries rather than taking them at face value: - React Native registered a wrapping `View` for controls that expose no ref. React Native cannot verify whether an element took focus, so Formisch trusts any registered element that cannot report its focus state and stops there, which turned a failed focus into a reported success. Those registrations are gone and the limitation is documented instead. - The Paper menu select never reported a blur, so blur-mode validation could not run. It now reports one whenever the menu closes. - Dropped `aria-invalid` from the Paper guide. React Native has no equivalent attribute, as the input components guide already states, and the visible helper text is what conveys the error. - Documented that `focus` cannot reach the Chakra UI and Mantine sliders. Both keep their focusable thumb as a `div`, and their only registrable input is either `display: none` or of type `hidden`. - Noted that dropping `onchange` for a Svelte composite control also drops change-mode validation, and how to trigger it if a form opts in. - Defined the option lists the Svelte select and radio snippets referenced, rendered the error element the shadcn-svelte select pointed at, and framed the shadcn-vue slider change as an edit to the generated component. - Forwarded `autofocus` in the generic Vue component-library examples and noted that unwrapping the root element only helps when it is focusable. - Added the community slider to the Paper install, flagged that its menu select needs React 19, and rephrased the Vue slot wording. Skipped four suggestions that the libraries contradict: the Base UI slider already takes its accessible name from the labelled root, PrimeVue's slider role does sit on a native range input, React Aria's select has no `value`/`onChange` API, and the Svelte radio default is seeded by the schema rather than left undefined.
- Move the select and slider focus handlers onto the visible trigger and thumb in the React and Vue guides, matching the Svelte one. A keyboard user never lands on the hidden input, so handlers placed there never fired and the field stayed untouched. Verified that `focus` still reaches the trigger, since Ark forwards focus from the hidden select. - Cast selected values to the field's own type instead of a two-member union that the four-item collection contradicts. - Link the Svelte guide from the Vue one, and render the React error elements only while the field is invalid.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e6db7fda65
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx (1)
287-296: 🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick winRoute
field.props.nameto the Bits UI root components.Both Bits UI examples omit
nameon the form root components. Bits UI usesSelect.Root.nameandRadioGroup.Root.nameto render the hidden input that native form submission needs, so Formischfield.props.nameshould not remain omitted from these roots.
- Extract
namein both snippets and pass it toSelect.RootandRadioGroup.Root; let the remaining props render onSelect.TriggerandRadioGroup.Item.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx around lines 287 - 296, Update both Bits UI snippets in website/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx at lines 287-296 and 326-338: extract name from field.props, pass it to the respective Select.Root and RadioGroup.Root, and keep the remaining field props spread onto Select.Trigger and RadioGroup.Item.Source: MCP tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/mantine/index.mdx:
- Around line 293-295: Update the Mantine Slider example to connect the first
validation error rendered by Input.Wrapper to the focusable thumb: provide a
stable error element id and pass it through the Slider thumb props as
aria-describedby, while setting aria-invalid based on field.errors. Keep
thumbLabel for the accessible name and ensure the documentation accurately
describes this validation-state wiring.
---
Outside diff comments:
In
`@website/src/routes/`(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx:
- Around line 287-296: Update both Bits UI snippets in
website/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdx
at lines 287-296 and 326-338: extract name from field.props, pass it to the
respective Select.Root and RadioGroup.Root, and keep the remaining field props
spread onto Select.Trigger and RadioGroup.Item.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f051ea79-2db1-48bc-859c-d54bb76bb573
📒 Files selected for processing (13)
website/src/routes/(docs)/react-native/guides/(integration-guides)/gluestack-ui/index.mdxwebsite/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/chakra-ui/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/mantine/index.mdxwebsite/src/routes/(docs)/solid/guides/(integration-guides)/kobalte/index.mdxwebsite/src/routes/(docs)/svelte/guides/(integration-guides)/bits-ui/index.mdxwebsite/src/routes/(docs)/svelte/guides/(integration-guides)/shadcn-svelte/index.mdxwebsite/src/routes/(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/primevue/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/reka-ui/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdxwebsite/src/routes/(docs)/vue/guides/(main-concepts)/input-components/index.mdx
🚧 Files skipped from review as they are similar to previous changes (9)
- website/src/routes/(docs)/vue/guides/(advanced-guides)/controlled-fields/index.mdx
- website/src/routes/(docs)/vue/guides/(integration-guides)/shadcn-vue/index.mdx
- website/src/routes/(docs)/svelte/guides/(integration-guides)/shadcn-svelte/index.mdx
- website/src/routes/(docs)/vue/guides/(main-concepts)/input-components/index.mdx
- website/src/routes/(docs)/vue/guides/(integration-guides)/ark-ui/index.mdx
- website/src/routes/(docs)/vue/guides/(integration-guides)/reka-ui/index.mdx
- website/src/routes/(docs)/vue/guides/(integration-guides)/primevue/index.mdx
- website/src/routes/(docs)/react/guides/(integration-guides)/chakra-ui/index.mdx
- website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx
There was a problem hiding this comment.
All reported issues were addressed across 15 files (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
- Stop registering Kobalte's hidden slider input. Measuring it showed that focusing it moves focus to a one pixel, `aria-hidden` element, so `focus` landed somewhere invisible. The focus handlers move to the visible thumb and the guide documents that `focus` skips this field, matching how the Chakra UI, Mantine and Ark UI sliders are already handled. - Give the React Native radio group an accessible name. The individual options announced their own labels while the group itself had none. - Note that Mantine's slider thumb cannot carry the error association either, since `thumbProps` is typed but never reaches the DOM. - Forward `autofocus` to the Ark UI slider thumbs, which now hold the focus handlers, so the slider matches the select and radio group.
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/src/routes/(docs)/react/guides/(integration-guides)/ark-ui/index.mdx (1)
341-348: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winSet the radio group invalid state on
RadioGroup.Root.
RadioGroup.Rootownsaria-errormessage="plan-error", but this example only setsaria-invalidon each hidden input. Set the root invalid state when there are errors so the message reference is pertinent; addinvalid={field.errors !== null}toRadioGroup.Root.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/react/guides/(integration-guides)/ark-ui/index.mdx around lines 341 - 348, Update the RadioGroup.Root example to pass invalid={field.errors !== null}, alongside its existing aria-errormessage, so the root reflects the field error state.
🧹 Nitpick comments (1)
website/src/routes/(docs)/react/guides/(integration-guides)/ark-ui/index.mdx (1)
345-346: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse the field-derived type for the radio callback.
The callback repeats the
'hobby' | 'pro'union. If the schema changes, this example can continue compiling while the cast no longer matches the field type. Usetypeof field.inputinstead.Based on learnings, derive selected values from
typeof field.inputso the example stays aligned with the schema.Proposed change
onValueChange={(details) => - field.onChange(details.value as 'hobby' | 'pro') + field.onChange(details.value as typeof field.input) }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/`(docs)/react/guides/(integration-guides)/ark-ui/index.mdx around lines 345 - 346, Update the onValueChange callback’s cast to use typeof field.input instead of the hardcoded 'hobby' | 'pro' union, keeping the selected-value type aligned with the field schema.Source: Learnings
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/ark-ui/index.mdx:
- Around line 341-348: Update the RadioGroup.Root example to pass
invalid={field.errors !== null}, alongside its existing aria-errormessage, so
the root reflects the field error state.
---
Nitpick comments:
In
`@website/src/routes/`(docs)/react/guides/(integration-guides)/ark-ui/index.mdx:
- Around line 345-346: Update the onValueChange callback’s cast to use typeof
field.input instead of the hardcoded 'hobby' | 'pro' union, keeping the
selected-value type aligned with the field schema.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: a859eeae-a161-46ab-a06c-e84c937f4e86
📒 Files selected for processing (6)
website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/react/guides/(integration-guides)/mantine/index.mdxwebsite/src/routes/(docs)/solid/guides/(integration-guides)/kobalte/index.mdxwebsite/src/routes/(docs)/svelte/guides/(integration-guides)/ark-ui/index.mdxwebsite/src/routes/(docs)/vue/guides/(integration-guides)/ark-ui/index.mdx
🚧 Files skipped from review as they are similar to previous changes (4)
- website/src/routes/(docs)/svelte/guides/(integration-guides)/ark-ui/index.mdx
- website/src/routes/(docs)/react/guides/(integration-guides)/mantine/index.mdx
- website/src/routes/(docs)/vue/guides/(integration-guides)/ark-ui/index.mdx
- website/src/routes/(docs)/react-native/guides/(integration-guides)/react-native-paper/index.mdx
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f270c9477f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
All reported issues were addressed across 6 files (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
- Report a blur when the gluestack select closes, so blur-mode validation can run. Its `Select` does expose `onClose`, so this matches the Paper adapter. - Document that a form configured with `validate: 'change'` does not validate controlled composite controls until submit. This affects Solid, Svelte and Vue, whose programmatic setter runs the input path only; the React and React Native setters already run both, so their guides need no such note. The three guides that already carried this note now give the same advice as the six that were missing it: use `validate: 'input'` rather than calling the change handler with a synthetic event, which needs a cast in Solid. - Correct the Svelte Ark UI prose, which said `autofocus` stays on the hidden part while the slider example had just moved it to the thumb. The slider is the exception, because its hidden input cannot be focused at all.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a40ebeeedc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Several snippets used `field` without showing the `Field` component that provides it, so a reader could not tell where the value came from or how to reproduce the example. Every code block that reads the field store is now wrapped in `Field`, using each framework's own form: a render prop for React, Solid and React Native, a snippet for Svelte, and `v-slot` for Vue. Two blocks needed more than a wrapper. The Kobalte focus-forwarding note showed a select part with no surrounding select, and the Svelte Ark UI destructure line had no snippet around it to destructure in.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 30c0886577
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
The Vue grammar only tokenizes markup inside `template`, so a snippet that started directly with a component tag had everything below its first element rendered as plain text. Wrapping each template snippet in `template` restores highlighting and matches how the other Vue guides in this repo write theirs.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c5ca230f2f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // `isFocused` is deliberately omitted: Formisch treats an element without it | ||
| // as successfully focused, instead of skipping to the next errored field. | ||
| useImperativeHandle(ref, () => ({ | ||
| focus: () => setVisible(true), |
There was a problem hiding this comment.
When focus(form, { path }) or submit-time error focusing calls this imperative handle, it only opens the menu and never invokes onFocus; unlike pressing the button, the field therefore remains untouched and touch-mode validation does not run. The exposed focus() implementation should report the same field lifecycle as the interactive path (the gluestack select adapter has the same gap).
Useful? React with 👍 / 👎.
| setVisible(true); | ||
| }} | ||
| > | ||
| {options.find((option) => option.value === value)?.label ?? label} |
There was a problem hiding this comment.
After an option is selected, the button's only accessible text changes from the prompt to the selected value (for example, just “React”), so a screen-reader user revisiting the control is no longer told that it is the Framework field. Give the anchor a stable accessibilityLabel and expose the selected option separately as its accessibility value.
Useful? React with 👍 / 👎.
Follow-up to #191, which added the first integration guide. This extends the format to four more React libraries and to Solid, Svelte, Vue and React Native, for 16 guides in total.
What is included
Each guide follows the structure the shadcn/ui guide settled on: installation, the two wiring patterns, error display, a complete login form, a component reference for text input, checkbox, select, radio group and slider, and any library specific notes.
Ark UI gets a guide on all four frameworks it publishes for, and those four cross-link each other. Its component API is identical everywhere, since the parts share the same state machines, so those guides differ only where the framework does.
The authoring skill is generalized in its own commit. It now carries a porting table for how the field contract is spelled per framework and a React Native variant of the structure.
Verification
Every snippet is transcribed from code that compiled and ran. For each library a throwaway app was scaffolded, built for production and driven in a browser, checking that errors render and are associated with their control, that focus marks a field as touched, that
focusreaches the intended element, that sliders render one thumb per value, that visible labels are the accessible names, and that the submitted output contains the parsed values.The non-React apps were built against locally packed framework tarballs, because the parameterless focus and blur handler types are not released yet.
Where something genuinely does not work, the guide says so instead of hiding it. Kobalte's hidden select does not delegate focus to its trigger, Ark UI's slider input is not focusable on any framework, React Aria's select exposes no native element, and gluestack's select cannot be opened programmatically.
Two guides also show the small edit needed in generated source to reach a slider thumb, which is fair since the reader owns that code.
Notes for review
v-modelidiom.Release dependency
The Solid, Svelte and Vue guides document the parameterless
onFocusandonBlurhandler types from #186, which are not in1.0.0-rc.0yet. Those packages need a release before or with the next website deploy, otherwise readers copying the examples will hit type errors.Summary by CodeRabbit