Switch

1import { Label } from "@ngrok/mantle/label";2import { Switch } from "@ngrok/mantle/switch";3 4<Label htmlFor="airplane-mode" className="flex items-center gap-2">5	Airplane Mode6	<Switch id="airplane-mode" />7</Label>;

1import { Button } from "@ngrok/mantle/button";2import { Label } from "@ngrok/mantle/label";3import { Switch } from "@ngrok/mantle/switch";4import { useForm } from "@tanstack/react-form";5import { z } from "zod";6import { useSubmit } from "react-router";7 8const formSchema = z.object({9	airplaneMode: z.boolean(),10});11 12type FormValues = z.infer<typeof formSchema>;13 14function FormExample() {15	const submit = useSubmit();16	const form = useForm({17		defaultValues: {18			airplaneMode: false,19		} satisfies FormValues as FormValues,20		validators: {21			onSubmit: formSchema,22		},23		onSubmit: ({ value }) => {24			// Handle form submission here25			submit(value, {26				method: "post",27			});28		},29	});30 31	return (32		<form33			className="space-y-4"34			onSubmit={(event) => {35				event.preventDefault();36				event.stopPropagation();37				void form.handleSubmit();38			}}39		>40			<div className="space-y-1">41				<form.Field name="airplaneMode">42					{(field) => (43						<Label htmlFor={field.name} className="flex items-center gap-2">44							Airplane Mode45							<Switch46								name={field.name}47								id={field.name}48								checked={field.state.value}49								onBlur={field.handleBlur}50								onCheckedChange={(value) => field.handleChange(value)}51							/>52						</Label>53					)}54				</form.Field>55				<form.Field name="airplaneMode">56					{(field) =>57						field.state.meta.errors.map((error) => (58							<p key={error?.message} className="text-sm leading-4 text-danger-600">59								{error?.message}60							</p>61						))62					}63				</form.Field>64			</div>65			<form.Subscribe selector={(state) => state.isDirty}>66				{(isDirty) => (67					<Button type="submit" appearance="filled" disabled={!isDirty}>68						Submit69					</Button>70				)}71			</form.Subscribe>72		</form>73	);74}