import React, { useId } from "react";
return (
<Stack alignItems={"center"} sx={{ width: "100%", maxWidth: "40dvw", margin: 2, backgroundColor: "lightblue", padding: 7, borderRadius: 15 }}>
<Typography variant="h6" sx={{ marginBottom: 5 }}>
Example - connecting ids to custom elements
</Typography>
<InputExample />
<InputExample />
</Stack>
)
}
function InputExample() {
const id = useId();
return (
<>
<label for={`${id}-email`}>email</label>
<input id={`${id}-email`} type="email" />
<label for={`${id}-name`}>name</label>
<input id={`${id}-name`} type="text" />
</>
);
}