JSX attributes

bool:*

Edit this page

bool:* controls whether an attribute is present on an element.

Strong-Typing Custom Boolean Attributes

Type definitions are required when using TypeScript. See the TypeScript page for examples.


Syntax

<my-element bool:status={value} />

Value

  • Type: any truthy or falsy value

Any JavaScript value is coerced by truthiness.


Behavior

  • bool:name={value} writes name="" when value is truthy.
  • bool:name={value} removes name when value is falsy.
  • SSR output follows the same presence-or-absence behavior.

Examples

Basic usage

<my-element bool:status={props.value} />

Resulting markup

// props.value is truthy
<my-element status />
// props.value is falsy
<my-element />

Report an issue with this page