The `<tc:in/>` tag may be extended with the facet tags `<f:facet name="before">` and `<f:facet name="after">`. With these, you can add text and dropdown menus to an input field.

The following example show how to add a text-label inside an input field.

    <tc:in>
      <f:facet name="before">https://example.com/</f:facet>
    </tc:in>

https://example.com/

    <tc:in label="Price">
      <f:facet name="after">.00 €</f:facet>
    </tc:in>

.00 €

Press the 'Send'-Button to add your message to the chat.

    <tc:in value="\#{groupController.newMessage}">
      ...
      <f:facet name="after">
        <tc:button label="Send" action="\#{groupController.sendChat}">
          <f:ajax execute="inewmessage" render="tachatlog"/>
        </tc:button>
      </f:facet>
    </tc:in>

User Two

The following two examples show an input field with a dropdown element in front of. Pressing the "SendTo"-Button will display a selectable list. This list is different in the examples. Notice that the `omit` attribute is set for `<tc:link/>`.

    <tc:in placeholder="type a message">
      <f:facet name="before">
        <tc:button id="lsendtoc" label="\#{groupController.sendTo}" omit="true">
          <tc:command label="SendTo: Peter">
            <f:ajax render="isendtoc" execute="isendtoc" listener="\#{groupController.sendToListener}"/>
          </tc:command>
          ...
        </tc:button>
      </f:facet>
    </tc:in>

    <tc:in id="isendtorb" placeholder="type a message">
      <f:facet name="after">
        <tc:button id="lsendtorb" label="\#{groupController.sendTo}" omit="true">
          <tc:selectOneRadio value="\#{groupController.sendTo}">
            <tc:selectItem itemValue="SendTo: Peter"/>
            ...
            <f:ajax render="isendtorb"/>
          </tc:selectOneRadio>
        </tc:button>
      </f:facet>
    </tc:in>

Send To: