Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172import { zodResolver } from '@hookform/resolvers/zod';import { Button } from '@luke-ui/react/button';import { Cluster } from '@luke-ui/react/cluster';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import { TextField } from '@luke-ui/react/text-field';import { Controller, useForm } from 'react-hook-form';import * as z from 'zod';
const schema = z.object({ email: z.email('Enter an email address in the form you@example.com.'), name: z.string().min(1, 'Enter your name.'),});
export default () => { const form = useForm({ defaultValues: { email: '', name: '' }, resolver: zodResolver(schema), });
return ( <Stack gap="sp16" maxInlineSize="20rem"> <form onSubmit={form.handleSubmit(() => undefined)}> <Stack gap="sp16"> <Controller control={form.control} name="name" render={({ field, fieldState }) => ( <Stack minBlockSize="5.5rem"> <TextField errorMessage={fieldState.error?.message} inputRef={field.ref} label="Name" onBlur={field.onBlur} onChange={field.onChange} validationBehavior="aria" value={field.value} /> </Stack> )} /> <Controller control={form.control} name="email" render={({ field, fieldState }) => ( <Stack minBlockSize="5.5rem"> <TextField errorMessage={fieldState.error?.message} inputRef={field.ref} label="Email" onBlur={field.onBlur} onChange={field.onChange} validationBehavior="aria" value={field.value} /> </Stack> )} /> <Cluster> <Button type="submit">Create account</Button> </Cluster> </Stack> </form> <Stack minBlockSize="1.5rem"> <Text elementType="p" role="status"> {form.formState.isSubmitSuccessful ? `Submitted: ${form.getValues('name')}` : '\u00a0'} </Text> </Stack> </Stack> );};