> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom components with free form

To make your component interactive and add options on the sidebar of the Visual Builder for entering data, you need to add the relevant options in the Widget file of that component and make necessary modifications in the Component as well.

To add a text box on the side bar of the Visual Builder, you need to include the following code in the Widget file.

```js theme={null}
const configObj = {
  headingText: '',
  traitConfig: [
    {
      type: 'exp_text',
      internalName: 'headingText',
      displayName: 'Heading Text',
    },
  ],
};
```

Up next, you will need to pass this object as an attribute in the widget file, as demonstrated in the following example.

```js theme={null}
const configObj = {
  headingText: '',
  traitConfig: [
    {
      type: 'exp_text',
      internalName: 'headingText',
      displayName: 'Heading Text',
    },
  ]
}

const CustomComponentWidget = Widget.createWidget({
  component: CustomComponent,
  label:"<div class='gjs-fonts gjs-f-b1 custom-widget'>Custom Component</div>",
  category: 'Basic Components',
  content: '<CustomComponent/>',
  widgetName: 'CustomComponent',
  widgetProperties: {
    defaults: {
      name: 'Custom Component',
      attributes: {
        component_content: JSON.stringify(configObj);
      },
      activeOnRender: true,
    },
  },
});
```

In the above example, you can see that the `configObj` is added to the attributes. This inclusion ensures that the text box will be rendered on the sidebar of the Visual Builder. You can then access the value of the text box in your component as a prop.

Here's an example of how you can add multiple options by passing them in the `traitConfig` array.

```js theme={null}
const configObj = {
  headingText: '',
  subHeadingText: '',
  traitConfig: [
    {
      type: 'exp_text',
      internalName: 'headingText',
      displayName: 'Heading Text',
    },
    {
      type: 'exp_text',
      internalName: 'subHeadingText',
      displayName: 'Sub Heading Text',
    },
  ]
}
```

Next, let us guide you with how to add [Custom Components Using Content Library](./custom-components-with-content-library).