Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172import { Button } from '@luke-ui/react/button';import { Checkbox } from '@luke-ui/react/checkbox';import { Cluster } from '@luke-ui/react/cluster';import { ComboboxField } from '@luke-ui/react/combobox-field';import { ComboboxItem } from '@luke-ui/react/primitives/combobox';import { Stack } from '@luke-ui/react/stack';import { TextField } from '@luke-ui/react/text-field';import type { SubmitEvent } from 'react';import { useState } from 'react';
const countries = [ { id: 'australia', label: 'Australia' }, { id: 'canada', label: 'Canada' }, { id: 'new-zealand', label: 'New Zealand' }, { id: 'united-states', label: 'United States' },];
type Errors = { country?: string; email?: string; terms?: string };
export default () => { const [errors, setErrors] = useState<Errors>({});
function handleSubmit(event: SubmitEvent<HTMLFormElement>) { event.preventDefault(); const data = new FormData(event.currentTarget); const emailValue = data.get('emailAddress'); const email = typeof emailValue === 'string' ? emailValue : '';
setErrors({ country: data.get('country') ? undefined : 'Choose the country where you work.', email: email.includes('@') ? undefined : 'Enter an email address in the form you@example.com.', terms: data.get('terms') ? undefined : 'Accept the terms of service before you continue.', }); }
return ( <form noValidate onSubmit={handleSubmit}> <Stack gap="sp16" maxInlineSize="20rem"> <Stack minBlockSize="5.5rem"> <TextField errorMessage={errors.email} label="Email address" name="emailAddress" placeholder="you@example.com" /> </Stack> <Stack minBlockSize="5.5rem"> <ComboboxField defaultItems={countries} errorMessage={errors.country} label="Work location" name="country" placeholder="Choose a country" > {(item) => <ComboboxItem>{item.label}</ComboboxItem>} </ComboboxField> </Stack> <Stack minBlockSize="4.5rem"> <Checkbox errorMessage={errors.terms} name="terms"> I accept the terms of service </Checkbox> </Stack> <Cluster> <Button type="submit">Create account</Button> </Cluster> </Stack> </form> );};