Switch

1import { Field } from "@ngrok/mantle/field";2import { Switch } from "@ngrok/mantle/switch";3 4<Field.Item name="airplane-mode-field">⋯5	<Field.Label className="inline-flex items-center gap-2">⋯6		<Field.Control>⋯7			<Switch />8		</Field.Control>9		Airplane Mode10	</Field.Label>11	<Field.Description>Disables wireless radios while in flight.</Field.Description>12</Field.Item>;

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 { Field, toErrorMessages } from "@ngrok/mantle/field";3import { Switch } from "@ngrok/mantle/switch";4import { useForm } from "@tanstack/react-form";5import { z } from "zod";6 7const formSchema = z.object({⋯8	airplaneMode: z.boolean(),9});10function FormExample() {⋯11	const defaultValues = {⋯12		airplaneMode: false,13	};14	const form = useForm({⋯15		defaultValues,16		validators: {⋯17			onSubmit: formSchema,18		},19		onSubmit: ({ value }) => {⋯20			// Handle form submission here21		},22	});23 24	return (25		<form⋯26			className="space-y-4"27			onSubmit={(event) => {⋯28				event.preventDefault();29				event.stopPropagation();30				void form.handleSubmit();31			}}32		>33			<form.Field name="airplaneMode">⋯34				{(field) => (35					<Field.Item name={field.name}>⋯36						<Field.Label className="flex items-center gap-2">⋯37							Airplane Mode38							<Field.Control>⋯39								<Switch⋯40									checked={field.state.value}41									onBlur={field.handleBlur}42									onCheckedChange={(value) => field.handleChange(value)}43								/>44							</Field.Control>45						</Field.Label>46						<Field.Errors messages={toErrorMessages(field.state.meta.errors)} />47					</Field.Item>48				)}49			</form.Field>50			<Button type="submit" appearance="filled">⋯51				Submit52			</Button>53		</form>54	);55}