Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344import { 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 { TextInputField } from '@luke-ui/react/text-input-field';import type { FormEvent } from 'react';import { useState } from 'react';
export default () => { const [submittedEmail, setSubmittedEmail] = useState('');
function handleSubmit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); const data = new FormData(event.currentTarget); const email = data.get('email'); setSubmittedEmail(typeof email === 'string' ? email : ''); }
return ( <Stack gap="sp16" maxInlineSize="22rem"> <form onReset={() => setSubmittedEmail('')} onSubmit={handleSubmit}> <Stack gap="sp16"> <TextInputField description="We will send the receipt to this address." isRequired label="Email address" name="email" type="email" /> <Cluster gap="sp8"> <Button type="submit">Submit</Button> <Button type="reset">Reset</Button> </Cluster> </Stack> </form> <Stack minBlockSize="1.5rem"> <Text elementType="p" role="status"> {submittedEmail ? `Submitted: ${submittedEmail}` : '\u00a0'} </Text> </Stack> </Stack> );};