import { DemoContainer } from '@/components/docs/DemoContainer' import { Button } from '@/components/twc-ui/button' import { Form, useForm } from '@/components/twc-ui/form' import { FormGroup } from '@/components/twc-ui/form-group' import { TextField } from '@/components/twc-ui/textfield' import { Head } from '@inertiajs/react' interface Props { contact: App.Data.ContactData } export default function FormDemo ({ contact }: Props) { const form = useForm<App.Data.ContactData>( 'contact-form', 'post', route('contact.store'), contact ) return ( <DemoContainer> <Head title="Form Demo" /> <Form form={form} errorVariant="field"> <FormGroup> <div className="col-span-12"> <TextField label="First name" {...form.register('first_name')} /> </div> <div className="col-span-12"> <TextField label="Last name" {...form.register('last_name')} /> </div> <div className="col-span-12"> <TextField label="E-Mail" {...form.register('email')} /> </div> <div className="col-span-12"> <Button title="Save" type="submit" /> </div> </FormGroup> </Form> </DemoContainer> ) }
Sneak preview: A DRYer form with precognition. #reactjs #shadcn #intertiajs #laravel
