A sample of a defined component we can see in the following example:

{selectComponent name="interests"}
  {param name="selected" value="$selected"/}
  {listItem name="1" value="Cars"/}
  {listItem name="2" value="Sports"/}
  {listItem name="3" value="Computers"/}

  {onMessage message="msg" position="up"}
    <p>Error: {@msg}</p>
  {/onMessage}
{/selectComponent}

A component in the template is built of the main opening and ending tag named like the component type we want to use. In the example above we wanted to display a selection component, so we used tags {selectComponent}.... {/selectComponent}. To display an input component, we would write {inputComponent}...{/inputComponent} etc. Between them, there are more special tags that set the parameters of the component. The exact way they are implemented depends on the component we use, as we mentioned above.

In fact, the programmer can (and even should!) write a component that configures itself automatically, reading the data directly from the web application, so that the component tags would be much shorter, than above. The shortest component definition you can create is to put a tag and load an external event created by bindEvent instruction.

{bindEvent id="universalMessage" name="onmessage" message="msg" position="down"}
<span class="error">{@msg}</span>
{/bindEvent}

<table>
 <tr>
  <td>Your name:</td>
  <td>{selfConfiguringComponent name="name"}{load event="universalMessage"/}{/selfConfiguringComponent}</td>
 </tr>
 <tr>
  <td>Your surname:</td>
  <td>{selfConfiguringComponent name="surname"}{load event="universalMessage"/}{/selfConfiguringComponent}</td>
 </tr>
 <tr>
  <td>Your e-mail:</td>
  <td>{selfConfiguringComponent name="email"}{load event="universalMessage"/}{/selfConfiguringComponent}</td>
 </tr>
</table>

However, such components must be created by a programmer, because OPT simply does not know, what is the architecture of the web application.