ImagePicker
A grid of selectable image tiles with an optional tag filter. Also the app-icon picker. Tiles blur up through Image.
In context
Why do we confess our sins to a priest and not straight to God?
Because Jesus gave the Apostles that ministry: ΓÇ£Whose sins you shall forgive, they are forgiven themΓÇ¥ (John 20:23). The priest acts in the person of Christ, and you are also free to speak to God directly at any time.
Choose how Athic looks on your home screen.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | ImagePickerItem[] | Yes | — |
selectedId | string | null | undefined | No | — |
defaultSelectedId | string | null | undefined | No | null |
onSelect | ((item: ImagePickerItem) => void) | undefined | No | — |
busyId | string | null | undefined | No | null |
columns | 3 | 4 | "auto" | undefined | No | 3 |
appearance | "default" | "classic" | undefined | No | — |
tags | string[] | undefined | No | — |
activeTag | string | null | undefined | No | — |
defaultActiveTag | string | null | undefined | No | null |
onTagChange | ((tag: string | null) => void) | undefined | No | — |
allLabel | string | null | undefined | No | All |
shape | "square" | "icon" | undefined | No | square |
loading | boolean | undefined | No | — |
multiTag | boolean | undefined | No | false |
activeTags | string[] | undefined | No | — |
defaultActiveTags | string[] | undefined | No | [] |
onActiveTagsChange | ((tags: string[]) => void) | undefined | No | — |
tagMatch | "all" | "any" | undefined | No | all |
disabled | boolean | undefined | No | false |
error | ReactNode | No | — |
onRetry | (() => void) | undefined | No | — |
empty | ReactNode | No | — |
Accessibility
Each tile is a real <button> named by the image's alt with aria-pressed for the selection, 44px minimum, with a visible focus ring. Tag chips are pressed-state buttons in a labelled group. The error block is role="alert"; loading sets aria-busy on the grid. A busy tile sets aria-busy, and every other tile is aria-disabled and ignores presses.
data-rebar-* attributes
data-rebar-component="image-picker", data-rebar-shape="square" | "icon", data-rebar-columns. Parts: tags, chip, grid, tile (with data-rebar-state="selected" | "busy"), check, busy, error, empty.
Migrating to Ant Design
No direct equivalent. Use Radio.Group with optionType="button" over Image previews, or Upload in picture-card mode when choosing a file is the point.
Multi-tag filter and disabled
Pass multiTag and the chips toggle independently; the grid shows items carrying every active tag (tagMatch="any" for any of them), "All" clears them (activeTags/onActiveTagsChange to control). disabled on the picker, or disabled: true on an ImagePickerItem, makes tiles ignore presses (aria-disabled). Each tile is named by its item alt.
<ImagePicker items={items} tags={["Scripture", "Saints"]} multiTag onSelect={pick} />appearance="classic", columns="auto"
appearance="classic" draws 10px-radius square tiles with a 3px border (bright primary when selected or busy), flat chips with a corner tick, and a plain empty message; columns="auto" fits tiles at least --rebar-image-picker-tile-min wide; allLabel={null} drops the All chip. Tokens: --rebar-image-picker-gap / -max-height / -tile-radius / -tile-bg, --rebar-classic-chip-*.