Description

let plan = "team";

function choosePlan(event: Event) {
	plan = (event.target as HTMLSelectElement).value;
	void handle.update();
}

<>
	{/* A native select's own change event bubbles, so the field's wrapper is where the
	    island listens; the select stays plain markup. */}
	<div mix={[on<HTMLDivElement, "change">("change", choosePlan)]}>
		<Label htmlFor="plan">Plan</Label>
		<Select id="plan" name="plan" aria-describedby="plan-note">
			{PLANS.map((option) => (
				<Select.Option key={option.id} value={option.id} selected={option.id === plan}>
					{option.label}
				</Select.Option>
			))}
		</Select>
		<Description id="plan-note">{PLAN_NOTES[plan]}</Description>
	</div>

	<Label htmlFor="billingEmail">Billing email</Label>
	<Input
		id="billingEmail"
		name="billingEmail"
		type="email"
		defaultValue="billing@acme.com"
		aria-describedby="billingEmail-note"
	/>
	<Description id="billingEmail-note">
		Invoices and renewal notices go here, not to the workspace owner.
	</Description>
</>