Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879import { Button } from '@luke-ui/react/button';import { Checkbox } from '@luke-ui/react/checkbox';import { Cluster } from '@luke-ui/react/cluster';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import { revalidateLogic, useForm } from '@tanstack/react-form';import { useRef } from 'react';import * as z from 'zod';
const schema = z.object({ terms: z.boolean().refine((accepted) => accepted, { error: 'Accept the terms of service before you continue.', }),});
const FOCUSABLE_SELECTOR = 'input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
function focusFirstInvalidField(form: HTMLFormElement | null) { const invalid = form?.querySelector('[aria-invalid="true"]'); if (!invalid) return; const control = invalid.matches(FOCUSABLE_SELECTOR) ? invalid : invalid.querySelector(FOCUSABLE_SELECTOR); if (control instanceof HTMLElement) control.focus();}
export default () => { const formRef = useRef<HTMLFormElement>(null);
const form = useForm({ defaultValues: { terms: false }, onSubmit: () => undefined, onSubmitInvalid: () => focusFirstInvalidField(formRef.current), validationLogic: revalidateLogic({ mode: 'submit', modeAfterSubmission: 'change' }), validators: { onDynamic: schema, onSubmit: schema }, });
return ( <Stack gap="sp16" maxInlineSize="20rem"> <form onSubmit={(event) => { event.preventDefault(); void form.handleSubmit(); }} ref={formRef} > <Stack gap="sp16"> <form.Field name="terms"> {(field) => ( <Stack minBlockSize="4.5rem"> <Checkbox errorMessage={field.state.meta.errors[0]?.message} isSelected={field.state.value} onBlur={field.handleBlur} onChange={field.handleChange} validationBehavior="aria" > I accept the terms of service </Checkbox> </Stack> )} </form.Field> <Cluster> <Button type="submit">Continue</Button> </Cluster> </Stack> </form> <Stack minBlockSize="1.5rem"> <Text elementType="p" role="status"> <form.Subscribe selector={(state) => state.isSubmitSuccessful}> {(isSubmitSuccessful) => (isSubmitSuccessful ? 'Terms accepted.' : '\u00a0')} </form.Subscribe> </Text> </Stack> </Stack> );};