Toggle Sidebar B
AppearanceLight & dark mode D

Companion Picker

The panel a person uses to choose their companion: a live preview, then bot or blob options. Controlled with v-model; saving, resetting and cancelling are events, so it fits any surface.

Default

Choose a kind, then tune it. The preview keeps looking at the pointer, and every click updates v-model at once.

Dark previewReplay previewOpen in new tab

Your companion

A little mascot that follows your cursor.

Shape

Finish

Hat

Glasses

Body colour

Live elsewhere

v-model changes with every click, so the host can show the draft somewhere else at the same time, here in a greeting, and drop it on cancel.

Dark previewReplay previewOpen in new tab

Welcome back, Sam

Your companion

A little mascot that follows your cursor.

Shape

Finish

Hat

Glasses

Body colour

In a dialog

The panel is not a dialog. Put it in a Dialog, a Sheet, a popover or a page.

Dark previewReplay previewOpen in new tab

Persisted

Saving hands you a normalized config: only the fields of the chosen kind. This example keeps it in localStorage.

Dark previewReplay previewOpen in new tab

Nothing saved yet. Reload the page to check.

Your companion

A little mascot that follows your cursor.

Shape

Finish

Hat

Glasses

Body colour

Limited kinds

kinds restricts and orders what can be chosen. With a single kind the toggle disappears.

Dark previewReplay previewOpen in new tab

Bots only

A little mascot that follows your cursor.

Shape

Finish

Hat

Glasses

Body colour

Blob or nothing

A little mascot that follows your cursor.

Shape

Colour

Tone

Mood

API Reference

CompanionPicker

PropTypeDefaultDescription
modelValueCompanionConfig | nullnullThe config being edited. Use v-model.
seedstring'guest'What a bot's body, a blob's shape and the idle timing come from while nothing is pinned.
savingbooleanfalseDisables the buttons and shows a spinner on Save.
kinds('bot' | 'blobatar' | 'none')[]['bot', 'blobatar', 'none']Which kinds can be chosen, in order.
titlestring'Your companion'
descriptionstring'A little mascot that follows your cursor.'
hideHeaderbooleanfalseHides the title and description.
hideFooterbooleanfalseHides Shuffle, Reset, Cancel and Save.
saveLabelstring'Save'
canResetbooleantrueDisables Reset when there is nothing to reset to.
EventDescription
update:modelValueEvery change, with the full draft config.
saveSave was pressed. The payload is the normalized config.
resetReset was pressed. The host decides what it resets to.
cancelCancel was pressed.
SlotDescription
headerReplaces the title and description.
defaultExtra content below the options, for a switch of your own.
footerReplaces the buttons. Receives shuffle and save.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • Shape, colour and kind pickers are radio groups with an accessible name each.
  • The preview is an image with a label that names the kind.
  • Every control reaches focus with Tab and shows a focus ring.
CompanionDodge Field