#Image Select

Expresses a small visual choice set through native radio or checkbox inputs while preserving names and selection beyond the thumbnail.

npm install @a3s-lab/ui@0.4.0

<fieldset class="image-select" aria-label="Cover treatment">
  <div data-image-option><input id="cover-light" type="radio" name="cover" checked /><label htmlFor="cover-light"><span data-image-preview style="background:#f7f7f8"></span>Light surface</label></div><div data-image-option><input id="cover-dark" type="radio" name="cover" /><label htmlFor="cover-dark"><span data-image-preview style="background:#202024"></span>Dark surface</label></div>
</fieldset>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<fieldset class="image-select" aria-label="Cover treatment">
  <div data-image-option><input id="cover-light" type="radio" name="cover" checked /><label htmlFor="cover-light"><span data-image-preview style="background:#f7f7f8"></span>Light surface</label></div><div data-image-option><input id="cover-dark" type="radio" name="cover" /><label htmlFor="cover-dark"><span data-image-preview style="background:#202024"></span>Dark surface</label></div>
</fieldset>

#Contract

#Product boundary

It is not a media library, upload manager, or crop tool. Sets larger than one screen need a host collection with search, pagination, and loading states.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Native inputs carry state and every option has text. Thumbnails are supporting information, with clear keyboard focus and selected outlines.