mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
a66476d60c
* fix(form): use native as default validation behavior * docs(form): delete explicit validationBehavior=native * test(form): adjusted form test validation behaviors * chore(form): adjusted stories with forms * chore(changeset): changed form default validation behavior to native * chore(changeset): removed packages with only test changes * chore(changeset): change to patch * chore(changeset): update package name * refactor(docs): update package name * refactor(docs): update to heroui --------- Co-authored-by: աӄա <wingkwong.code@gmail.com>
31 lines
744 B
JavaScript
31 lines
744 B
JavaScript
import {Button, InputOtp, Form} from "@heroui/react";
|
|
|
|
export default function App() {
|
|
const [otp, setOtp] = React.useState("");
|
|
|
|
return (
|
|
<Form
|
|
className="flex w-full flex-col items-start gap-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.currentTarget);
|
|
const otp = formData.get("otp");
|
|
|
|
setOtp(otp);
|
|
}}
|
|
>
|
|
<InputOtp
|
|
isRequired
|
|
aria-label="OTP input field"
|
|
length={4}
|
|
name="otp"
|
|
placeholder="Enter code"
|
|
/>
|
|
<Button size="sm" type="submit" variant="bordered">
|
|
Submit
|
|
</Button>
|
|
{otp && <div className="text-small text-default-500">OTP submitted: {otp}</div>}
|
|
</Form>
|
|
);
|
|
}
|