VisuallyHiddenInput
UtilityStable
Accessible hidden input that dispatches synthetic events for native form serialization. Use in custom form controls.
Quick Import
import { VisuallyHiddenInput } from "@cohere-ai/waypoint-ui/visually-hidden-input";Live Preview
Loading VisuallyHiddenInput...
Props
| Name | Type | Default | Description |
|---|---|---|---|
control | HTMLElement | null | - | Element whose changes trigger synthetic events |
value | string | number | - | Current value |
checked | boolean | - | Checked state (for checkbox/radio) |
type | string | 'hidden' | Input type |
bubbles | boolean | true | Whether dispatched events bubble |
Examples
In a Custom Form Control
Hidden input that mirrors a custom control's value for form serialization
1 import { VisuallyHiddenInput } from '@cohere-ai/waypoint-ui/visually-hidden-input'; 2 3 <div ref={controlRef}> 4 <CustomControl onValueChange={setValue} /> 5 <VisuallyHiddenInput 6 control={controlRef.current} 7 name="myField" 8 value={value} 9 /> 10 </div>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the VisuallyHiddenInput component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.