CheckboxGroup

let chosen = new Set(["email"]);

<div mix={[vstack({ gap: 2, align: "stretch" }), maxIs("26rem")]}>
	<CheckboxGroup
		orientation="vertical"
		aria-labelledby="preview-channels-label"
		aria-describedby="preview-channels-hint preview-channels-error"
		aria-invalid={chosen.size === 0 ? "true" : undefined}
		mix={[vstack({ gap: 3, align: "stretch" })]}
	>
		<Label id="preview-channels-label">Page me about incidents on</Label>

		{CHANNELS.map((channel) => (
			<Checkbox
				key={channel.value}
				name="channels"
				value={channel.value}
				checked={chosen.has(channel.value)}
				disabled={channel.disabled}
				mix={[
					ariaChecked(),
					on<HTMLInputElement, "change">("change", (event) => {
						if (event.currentTarget.checked) chosen.add(channel.value);
						else chosen.delete(channel.value);
						void handle.update();
					}),
				]}
			>
				<span mix={[vstack({ gap: 0, align: "start" })]}>
					<span mix={[text("sm")]}>{channel.label}</span>
					<span mix={[text("xs"), fg("neutral")]}>{channel.hint}</span>
				</span>
			</Checkbox>
		))}
	</CheckboxGroup>

	<Description id="preview-channels-hint">
		Severity 1 pages go to every channel you keep on.
	</Description>
	<FieldError id="preview-channels-error" hidden={chosen.size > 0}>
		Pick at least one channel.
	</FieldError>
</div>