TeachKit project

TeachKit / Design system

Documentation v2.0.0 · Redesigned app and marketing site

Design system contents

Components

Provider video selection

Search connected videos while retaining a manual embed path.

On this page

Purpose and composition

VideoSearchBox filters provider video titles and reports the selected item to the lesson editor.

Anatomy

  • Search field
  • Filtered title suggestions
  • Selected video callback
  • Manual embed alternative in the editor

Configuration and variants

Configuration and variants
Input or variantContract
VideosProvider hook supplies IDs and titles.
FilteringCase-insensitive substring matches; an exact selected title is excluded.
SelectionClickable suggestions invoke the parent callback.

States and feedback

No matches and a selected title produce an empty suggestions list. Provider loading and authorization belong to the integration flow.

Interaction and responsive behavior

Outside click closes suggestions. Keep the manual embed option available when a provider library cannot be used.

Accessibility and known limits

The current suggestion list uses clickable list items without combobox/listbox semantics or keyboard selection. Document it as an implementation gap rather than a reusable accessible autocomplete.

Source references

Source references
FileResponsibility
src/components/VideoSearchBox.tsxSearch interaction
src/components/LessonItem.tsxProvider and manual embed composition

Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0