RruForm
Example
Click “Open Sandbox” to see the example source code
Props
| Name | Description | Required |
|---|---|---|
| onSubmit | A function which takes the form data object as an argument. Will be called when the user submits the form if there is no validation violation | Yes |
| initialValues | An object containing the form default values. | No |
| yupValidationSchema | yup validation schema |
No |
| id | The form id. This can be used if your submit button is outside the form |
No |
| context | If you want to programmatically access the form fields, you can use useRruForm() hook and pass its returned context here. More information further down in the docs. |
No |
Nested Fields
You can have nested field names, for example:
<RruTextInput name="name" label="Name" />
<RruTextInput name="age" label="Age" />
<RruTextInput name="address.city" label="City" />
<RruTextInput name="address.street" label="Street" />
Would result in the following form values object:
{
name: 'Khalid',
age: 100,
address: {
city: 'Riyadh',
street: 'Olya St.'
}
}
Note
Please note that the field names should not start with a digit. If you want to represent an array of objects, prefix the name with any string.
<!-- won't work properly ❌ -->
<RruTextInput name="owner.1.name" label="Owner Name" />
<!-- good ✅ -->
<RruTextInput name="owner.item_1.name" label="Owner Name" />
Read and write field values programmatically
To read or write a field value programmatically, you need to declare the form context and supply it to the form element.
const context = useRruForm();
const triggerManualAccess = () => {
console.log('trigger manual access');
console.log('read all form fields', context.getFieldsValues());
console.log('read email', context.getFieldValue('email'));
context.setFieldValue('email', 'new@form.test');
context.setFieldValue('notes', null);
};
return (
<RruForm context={context} onSubmit={onSubmit}>
<RruTextInput name='email' label='Email' />
<RruTextareaInput name='notes' label='Notes' />
<button onClick={triggerManualAccess} className='btn btn-primary mt-4 me-4'>
Trigger manual access
</button>
<button type='submit' className='btn btn-primary mt-4'>
Submit
</button>
</RruForm>
);