Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273import { Button } from '@luke-ui/react/button';import { CheckboxField } from '@luke-ui/react/checkbox-field';import { Cluster } from '@luke-ui/react/cluster';import { ComboboxField, ComboboxItem } from '@luke-ui/react/combobox-field';import { Stack } from '@luke-ui/react/stack';import { TextInputField } from '@luke-ui/react/text-input-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"> <TextInputField 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"> <CheckboxField errorMessage={errors.terms} label="I accept the terms of service" name="terms" /> </Stack> <Cluster> <Button type="submit">Create account</Button> </Cluster> </Stack> </form> );};