> For the complete documentation index, see [llms.txt](https://docs.work-relay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.work-relay.com/forms/using-forms/how-to-incorporate-form-into-the-lightning-component.md).
# How to incorporate form into the lightning component
Work Relay form can be incorporated into the lightning component using `WR_BPM:FormComponent` component as form wrapper.
`WR_BPM:FormComponent` has following attributes:
* **formId** - id of form that needs to be incorporated
* **recordId** - id of form source object. Attribute can be left blank in case form is used to create new records.
* **formMode** - `'edit'` or `'view'`
* **class** - optional parameter to pass class name that should be applied to the form component
```html
```
Below is example of lightning component which uses Work Relay forms. It uses accordion aura component to switch between forms in the list: once user clicks accordionSection aura component corresponding form is expanded. *formId* attribute represents form id for the expanded accordionSection, *selectionName* attribute represents name of expanded accordionSection. Both forms are used to create new records which is the reason recordId attribute is blank.
```html
```
Component controller:
```javascript
({
handleSectionToggle: function (component, event) {
//define which section was expanded
if(component.find("accordion").get('v.activeSectionName') == 'NewAccount')
{
//logic to get New Account form id to update formId with
//...
//...
component.set("v.formId", 'new_account_form_id');
component.set("v.selectionName", 'NewAccount');
}
else
{
//logic to get New Case form id to update formId with
//...
//...
component.set("v.formId", 'new_case_form_id');
component.set("v.selectionName", 'NewCase');
}
}
})
```
