{
  "id": "fd9e8f5b126f3e53bf0d69e8",
  "source": "solid:signals",
  "type": "github-document",
  "title": "bool",
  "content": "---\ntitle: 'bool:*'\nuse_cases: \u003e-\n  web components, custom elements, conditional attributes, boolean attributes,\n  dynamic attribute presence\ntags:\n  - attributes\n  - web-components\n  - boolean\n  - conditional\n  - dynamic\nversion: '1.0'\ndescription: \u003e-\n  Control attribute presence with bool:* directive in SolidJS. Add or remove\n  attributes dynamically based on truthy/falsy values for web components.\n---\n\n`bool:*` controls the presence of an attribute in an element.\nWhen the value is `truthy` it adds the `attribute` to the element.\nAlternatively, when the value is `falsy` it removes the `attribute` from the element.\nThis attribute is most useful for Web Components.\n\n```tsx\n\u003cmy-element bool:status={prop.value} /\u003e\n```\n\n```tsx\n// Assuming `prop.value` is `truthy`, then it becomes\n\u003cmy-element status /\u003e\n\n// And when `falsy`, then it becomes\n\u003cmy-element /\u003e\n\n```\n\n:::note[Strong-Typing Custom Boolean Attributes]\nType definitions are required when using TypeScript.\nSee the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.\n:::",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/bool.mdx",
  "metadata": {
    "path": "src/routes/reference/jsx-attributes/bool.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1083,
    "source_type": "github"
  },
  "hash": "951d1ca45166e9f993ac2c5754c4663a9ac881d4f263d806383511b1dc841950",
  "timestamp": "2026-02-23T11:43:00.189331587+01:00"
}