Components / Onboarding and feedback / Companion toggle
F3 · Onboarding and feedback
Companion toggle
Shows or hides the companion slot. The slot stays empty either way.
<label class="c-switch"><input type="checkbox" data-show-companion checked> Show companion</label>
<div class="slot">Bud companion, pending yravgBud</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- People can turn the companion off.
- The slot is the only companion surface.
When not to use
- The companion is required for the task.
- Hide would remove a form field.
Usage
<label class="c-switch"><input type="checkbox" data-show-companion checked> Show companion</label>
<div class="slot">Bud companion, pending yravgBud</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-show-companion | checkbox | checked | When unchecked, the slot is hidden. |
| slot | element | visible | Same pending label as the companion card. |
Keyboard
| Key | Action |
|---|---|
| Space | Toggles the checkbox. |
| Tab | Moves to the checkbox. |
Accessibility
- The control is a labelled checkbox.
- Hiding the slot removes it from the visual layout and sets the hidden attribute.
Motion
- The slot appears and disappears without animation.
Pattern origin
Pattern type: a show or hide control for the companion slot.