Flag Types

Boolean Flags

<vibe-flags-boolean> is a simple on/off toggle. Starts as false.

<vibe-flags-boolean name="darkMode" description="Dark mode" value="true">
  <div>Dark mode is active!</div>
</vibe-flags-boolean>

Attribute	Required	Default	Description
name	Yes	—	Unique identifier for the flag
description	No	""	Label shown in the toolbar (falls back to name)
value	No	""	Expected value to show children. If omitted, children are always shown.

Select Flags

<vibe-flags-select> lets users pick from a list. Starts as the first option. Each choice is a <vibe-flags-option>.

<vibe-flags-select name="theme" description="Theme variant">
  <vibe-flags-option value="light">
    <div>Light theme</div>
  </vibe-flags-option>
  <vibe-flags-option value="dark">
    <div>Dark theme</div>
  </vibe-flags-option>
  <vibe-flags-option value="auto">
    <div>Auto theme</div>
  </vibe-flags-option>
</vibe-flags-select>

Attribute	Required	Default	Description
name	Yes	—	Unique identifier for the flag
description	No	""	Label shown in the toolbar (falls back to name)

<vibe-flags-option>

Attribute	Required	Description
value	Yes	The option value. Children are shown only when this option is active.

Toolbar Position

The <vibe-flags-toolbar> FAB starts at the corner specified by the position attribute. The user can drag it to any corner and the choice is saved in localStorage — that saved preference takes priority over the attribute.

<!-- Start in top-left (overridden by localStorage if user has dragged before) -->
<vibe-flags-toolbar position="top-left"></vibe-flags-toolbar>

Valid values: bottom-right (default), bottom-left, top-right, top-left.

The panel width can also be resized by dragging the edge handle on the open panel. The chosen size is saved in localStorage (vibe-flags:toolbar-size).

URL Query Parameter Overrides

You can override any flag's value via a URL query parameter without touching localStorage. This is useful for sharing exact flag states with teammates for QA, demos, or reviews.

Format: ?vf:<flag-name>=<value>

https://yourapp.com?vf:dark-mode=true&vf:theme=dark

Rules:

• URL params take priority over localStorage values when present.
• URL params are ephemeral — they are not written to localStorage and do not persist across page loads.
• Boolean flags accept true or false. Any other value is ignored.
• Select flags accept any value that is a valid option. Values not in the options list are ignored.