nextui/apps/docs/content/components/input/regex-validation.ts
աӄա dc245874ce
feat(docs): docs changes (#2868)
* feat(docs): add example how to set locale (#2867)

* docs(guide): add an explanation for the installation guide (#2769)

* docs(guide): add an explanation for the installation guide

* docs(guide): add an explanation for the cli guide

* docs(guide): add support for cli output

* fix: change sort priority - cmdk (#2873)

* docs: remove unsupported props in range calendar and date range picker (#2881)

* chore(calendar): remove showMonthAndYearPickers from range calendar story

* docs(date-range-picker): remove showMonthAndYearPickers info

* docs(range-calendar): remove unsupported props

* docs: refactor typing in form.ts (#2882)

* chore(docs): supplement errorMessage behaviour in input (#2892)

* refactor(docs): revise NextUI Provider structure

* chore(docs): add updated tag

---------

Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com>
Co-authored-by: HaRuki <soccer_haruki15@me.com>
Co-authored-by: Kaben <carnoxen@gmail.com>
2024-05-04 13:09:56 -03:00

36 lines
764 B
TypeScript

const App = `import {Input} from "@nextui-org/react";
export default function App() {
const [value, setValue] = React.useState("junior2nextui.org");
const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
const isInvalid = React.useMemo(() => {
if (value === "") return false;
return validateEmail(value) ? false : true;
}, [value]);
return (
<Input
value={value}
type="email"
label="Email"
variant="bordered"
isInvalid={isInvalid}
color={isInvalid ? "danger" : "success"}
errorMessage="Please enter a valid email"
onValueChange={setValue}
className="max-w-xs"
/>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};