Form Note

function FormNoteExample() {
                    const [password, setPassword] = React.useState('my-password123');
                    const handleChange = (password: string) => {
                        setPassword(password);
                    };
                    return (<>
                        <Label for="example-39189">Password</Label>
                        <TextInput id="example-39189" type="password" value={password} onChange={setPassword} />
                        <div className="mt1">
                            <FormNote>Passwords must be at least 8 characters long.</FormNote>
                        </div>
                    </>)
                }

function FormNoteExample() {
                    const [email, setEmail] = React.useState('blank@example.com');
                    const [displayErrorMessage, setDisplayErrorMessage] = React.useState(false);
                    const handleChange = (emailValue: string) => {
                        setEmail(emailValue);
                        setDisplayErrorMessage(!emailValue.includes('@'));
                    };
                    return (<>
                        <Label for="example-39189">Email</Label>
                        <TextInput id="example-39189" type="email" value={email} onChange={setEmail} />
                        <div className="mt1">
                            {displayErrorMessage && <FormNote hasError>Emails must contain an @ symbol.</FormNote>}
                        </div>
                    </>)
                }