Attributes

Constant attributes

templ elements can have HTML attributes that use the double quote character ".

templ component() {
  <p data-testid="paragraph">Text</p>
}

Output

<p data-testid="paragraph">Text</p>

Boolean attributes

Boolean attributes (see https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) where the presence of an attribute name without a value means true, and the attribute name not being present means false are supported.

templ component() {
  <hr noshade/>
}

Output

<hr noshade>

note

templ is aware that <hr/> is a void element, and renders <hr> instead.

To set boolean attributes using variables or template parameters, a question mark after the attribute name is used to denote that the attribute is boolean.

templ component() {
  <hr noshade?={ false } />
}

Output

<hr>

Conditional attributes

Use an if statement within a templ element to optionally add attributes to elements.

templ component() {
  <hr style="padding: 10px" 
    if true {
      class="itIsTrue"
    }
  />
}

Output

<hr style="padding: 10px" class="itIsTrue" />

URL attributes

The <a> element's href attribute is treated differently. templ expects you to provide a templ.SafeURL instead of a string.

Typically, you would do this by using the templ.URL function.

The templ.URL function sanitizes input URLs and checks that the protocol is http/https/mailto rather than javascript or another unexpected protocol.

templ component(p Person) {
  <a href={ templ.URL(p.URL) }>{ strings.ToUpper(p.Name) }</a>
}

caution

If you need to bypass this sanitization, you can use templ.SafeURL(myURL) to mark that your string is safe to use.

This may introduce security vulnerabilities to your program.

JavaScript attributes

onClick and other on* handlers have special behaviour, they expect a reference to a script template.

info

This ensures that any client-side JavaScript that is required for a component to function is only emitted once, that script name collisions are not possible, and that script input parameters are properly sanitized.

script withParameters(a string, b string, c int) {
	console.log(a, b, c);
}

script withoutParameters() {
	alert("hello");
}

templ Button(text string) {
	<button onClick={ withParameters("test", text, 123) } onMouseover={ withoutParameters() } type="button">{ text }</button>
}

Output

<script type="text/javascript">
 function __templ_withParameters_1056(a, b, c){console.log(a, b, c);}function __templ_withoutParameters_6bbf(){alert("hello");}
</script>
<button onclick="__templ_withParameters_1056("test","Say hello",123)" onmouseover="__templ_withoutParameters_6bbf()" type="button">
 Say hello
</button>

CSS attributes

CSS handling is discussed in detail in CSS style management.