Multimedia Picker

Semantic multimedia picker component with media previews, organized by type. Includes visual thumbnails for images, audio, and video files.

Multimedia Picker with Previews

Select Images
Selected:
  • No items selected
<article class="card preview">
  <menu class="tabs" role="tablist">
    <button role="tab" aria-selected="true">Images</button>
  </menu>
  <div role="tabpanel">
    <div class="grid tiles">
      <label class="card">
        <input type="checkbox">
        <figure><img src="https://via.placeholder.com/150"></figure>
        <figcaption>photo.jpg</figcaption>
      </label>
    </div>
  </div>
  <footer>
    <button class="button primary">Insert Media</button>
  </footer>
</article>

Media Preview System

  • Media Thumbnails - Each media type has icon representation (Image, Video, Music)
  • Visual Container - Bordered box with shadow and padding for containment
  • Hover States - Thumbnail highlights on hover with transform
  • Selected State - Checkbox with visual feedback via background color
  • File Names - Displayed below each thumbnail in info section
  • Responsive Grid - auto-fill with minmax(120px, 1fr)

Icon Mapping by Media Type

  • Images - `` (frame/photo icon)
  • Videos - `` (video camera icon)
  • Audio - `` (music note icon)

Visual Structure

  • Outer Container - `border: 2px solid var(--a-color-border)` with box-shadow
  • Media Item Card - Individual media with thumbnail, checkbox, and info
  • Thumbnail Area - Icon centered in square with aspect-ratio: 1
  • Hover Effect - Primary container background + border color change + translateY
  • Selected Effect - Info section background changes to primary-container
  • Spacing - All using design tokens (var(--a-space-m), var(--a-space-l))

Key Features

  • Semantic HTML - role="tab", role="tabpanel", fieldset, legend, checkbox
  • Visual Containment - Bordered container with shadow removes "floating" feel
  • Media Previews - Axicon thumbnails for each media type
  • Type Organization - Separate tabs for Images, Videos, Audio
  • Selection Tracking - Shows selected media below with update on checkbox change
  • Responsive Grid - Automatically adapts to screen width
  • Proper ARIA - aria-selected, aria-controls, aria-labelledby
  • Keyboard Support - Arrow keys, Tab, Enter, Space

Use Cases

  • Media Library - Browse and select multiple media files
  • File Manager - Organized file selection interface
  • Content Creation - Pick media for posts/articles
  • Gallery Management - Organize and select photos
  • Asset Library - Browse project media files
  • Playlist Builder - Select audio tracks

Accessibility

  • Semantic role="tab", role="tabpanel" for tab interface
  • aria-selected for active tab state
  • aria-controls linking tabs to panels
  • aria-labelledby for proper descriptions
  • Fieldset and legend for form grouping
  • Checkbox inputs with associated labels
  • Keyboard navigation (Tab, Arrow keys, Enter, Space)
  • Screen reader support for all interactions

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.