html-swiftui-compare-events.md

HTML element (tag / state)	SwiftUI closest equivalent(s)	Default action(s)	Trigger	Event name(s) to bind on the element
a[href]	Link(destination: url) { … } or Button { openURL(url) } (@Environment(\.openURL))	Follow link / navigate	activation	click
area[href]	No native image-map; Image + overlay hit regions (ZStack/Canvas) + multiple Buttons + contentShape	Follow link	activation on region	click
button[type=submit]	Button("Submit") { … } (you implement submit in your form model)	Submit form	activation	click (or submit on <form>)
button[type=reset]	Button("Reset") { … }	Reset form	activation	click
button[type=button]	Button { … } label: { … }	None intrinsic	activation	click
button[popovertarget]	Button { isPresented.toggle() } + .popover(isPresented:) { … }	Show/hide/toggle popover target	activation	click
button[commandfor][command]	Button { dispatchCommand(...) } (your command router / coordinator / environment)	Invoke command on target	activation	click (and your target receives a command event in your DOM system)
input[type=submit]	Button { submit() }	Submit form	activation	click (or submit on <form>)
input[type=image]	Button { submit(...) } label: { Image(...) } (optional gesture to capture tap location)	Submit form (web UAs include click coordinates)	activation	click
input[type=reset]	Button { reset() }	Reset form	activation	click
input[type=button]	Button { … }	None intrinsic	activation	click
input[type=checkbox]	Toggle(isOn:) { … } (or custom Button toggling Bool)	Toggle checked	activation (click/space)	click (intercept), input, change
input[type=radio]	Picker(selection:) { … } (macOS: .pickerStyle(.radioGroup)), or custom radio list	Select within group	activation	click (intercept), input, change
input[type=file]	.fileImporter(isPresented: …, allowedContentTypes: …) { … } (or PhotosPicker for photos)	Open picker; set files	activation (user gesture)	click (intercept), then input, change
`input[type=date	time	datetime-local	month	week]`	DatePicker(selection: …, displayedComponents: …)	Open picker; set value	activation / edit	click (if you emulate picker open), then input, change
input[type=color]	ColorPicker(selection: …)	Open picker; set value	activation	click (if you emulate picker open), then input, change
input[type=range]	Slider(value:in:step:)	Adjust value	drag/keys	input (during), change (commit)
input[type=number]	TextField(value:format:) and/or Stepper(value:in:step:)	Adjust numeric value	edit/stepper	input, change
`input[type=text	search	email	url	tel]`	TextField(text:) (plus appropriate keyboard/content types)	Edit text	typing/IME	beforeinput, input, change (depending on your model)
input[type=password]	SecureField(text:)	Edit hidden text	typing/IME	beforeinput, input, change
textarea	TextEditor(text:)	Edit multiline text	typing/IME	beforeinput, input, change
form	Form { … } (layout) + your submit/validation model	Submission pipeline	submit invocation	submit
select	Picker(selection:) { … } or Menu { … } label: { … }	Open list UI; update selection	click/keys	input, change (and optionally mousedown/keydown if you emulate “open”)
option	Text("…").tag(value) inside a Picker	Become selected	selection interaction	Prefer input/change on owning select
label (for control)	Usually compose into control label (Toggle("Title", …)), or Text next to control; emulate forwarding via onTapGesture + focus/binding	Focus/activate associated control	click	click
details + summary	DisclosureGroup(isExpanded:) { … } label: { … }	Toggle open/closed	activation on summary	click on summary; toggle on details
dialog	.sheet(isPresented:), .alert(...), or .confirmationDialog(...)	Cancel/close request; close	Esc/dismiss gestures	cancel, close
form[method="dialog"] in dialog	Buttons that set returnValue + dismiss() (@Environment(\.dismiss))	Close dialog w/ return value	submit	submit (or button click)
[popover] target element	.popover(isPresented:) or .popover(item:)	Show/hide popover	command/invoker/API	In web: beforetoggle, toggle (you can mirror these in your DOM event system)