Forms
Hybrid Form
A LiveView form with a React control inside it
- forms
- Phoenix.HTML.Form encoder
Key concepts
A React component can sit inside an ordinary <.simple_form>
alongside HEEx inputs, as long as it renders a field named the way
Phoenix.HTML.Form
expects. It doesn't need pushEvent
at all — the field's value reaches phx-change
the same
way any native input's would.
How it works
The slider passes inputName="settings[delay_between]"
straight through to Radix's name
prop, which renders
hidden inputs under that name for each thumb. The browser submits
them like any other form field, so phx-change="validate"
fires exactly as it would for a native <input>.
The component's own dragging state — the thumb positions mid-drag —
lives in useState and never touches the server; only a
real change event submits a value, same as a native range input.