Skip to main content

Form

Usage

import { usestate } from 'react';
import Button from '@mavvy/m3-ui/Button';
import Form from '@mavvy/m3-ui/Form';

function FormPage() {
const [formValue, setFormValue] = useState({
username: '',
password: '',
});

const handleSubmit = () => {
window.alert(JSON.stringify(formValue, null, 2));
};

const handleChange = (key, value) => {
setFormValue((data) => ({
...data,
[key]: value
}));
}

const fields = [{
key: 'username',
label: 'Username',
}, {
key: 'password',
label: 'Password',
type: 'password',
}];

return (
<Form
value={formValue}
onChange={handleChange}
onSubmit={handleSubmit}
fields={fields}
>
<Button variant="filled" color="primary">Login</Button>
</Form>
);
}

Props

proptypedescription
valueObject
onChange(key: string, value: any) => void
onSubmit() => void
fieldsany[]
colorColor