Docs > Forms

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>
);

Input Components

Text

Date and Time

Select

Checkbox

Radio

Files