Web Components

`<vibe-flags-boolean>`

Declares a boolean flag and conditionally renders its children.

Attributes

Attribute	Type	Default	Description
`name`	`string`	`''`	Unique flag identifier
`description`	`string`	`''`	Label shown in the toolbar (falls back to `name`)
`value`	`string`	`''`	Expected value to show children. If omitted, children are always shown.
`default`	`boolean`	`false`	Initial value when no stored value exists. Also used by "Reset all to defaults".

Examples

<!-- Show when true, default on -->
<vibe-flags-boolean name="showCta" description="Show CTA" default value="true">
  <section>Call to action</section>
</vibe-flags-boolean>
 
<!-- Show when false -->
<vibe-flags-boolean name="darkMode" value="false">
  <div>Light mode active</div>
</vibe-flags-boolean>
 
<!-- Always show (registration only) -->
<vibe-flags-boolean name="darkMode">
  <div>Always visible</div>
</vibe-flags-boolean>

`<vibe-flags-select>`

Declares a select flag. Options are defined as <vibe-flags-option> children.

Attributes

Attribute	Type	Default	Description
`name`	`string`	`''`	Unique flag identifier
`description`	`string`	`''`	Label shown in the toolbar (falls back to `name`)
`default`	`string`	first option	Initial option value. Must match a child option's `value`.
`custom`	`boolean`	`false`	Adds a "Custom..." option with free-text input in the toolbar.

Examples

<!-- Basic select -->
<vibe-flags-select name="hero" description="Hero section">
  <vibe-flags-option value="minimal"><h1>Minimal</h1></vibe-flags-option>
  <vibe-flags-option value="visual"><h1>Visual</h1></vibe-flags-option>
</vibe-flags-select>
 
<!-- With explicit default -->
<vibe-flags-select name="theme" description="Theme" default="dark">
  <vibe-flags-option value="light"><p>Light</p></vibe-flags-option>
  <vibe-flags-option value="dark"><p>Dark</p></vibe-flags-option>
</vibe-flags-select>
 
<!-- With custom input -->
<vibe-flags-select name="api-url" description="API URL" custom>
  <vibe-flags-option value="https://api.example.com"><p>Production</p></vibe-flags-option>
  <vibe-flags-option value="https://staging.example.com"><p>Staging</p></vibe-flags-option>
</vibe-flags-select>

`<vibe-flags-option>`

A single option inside <vibe-flags-select>. Children are shown only when this option is active.

Attributes

Attribute	Type	Default	Description
`value`	`string`	`''`	The option value

Floating toggle button and slide-out sidebar. Discovers all registered flags and renders controls.

Attributes

Attribute	Type	Default	Description
`position`	`string`	`'bottom-right'`	Initial corner. One of: `bottom-right`, `bottom-left`, `top-right`, `top-left`. Overridden by saved user preference.

Example

<vibe-flags-toolbar></vibe-flags-toolbar>
<vibe-flags-toolbar position="top-left"></vibe-flags-toolbar>

On this page