Choice & selection

AppSelectMini

A compact, single-purpose picker for toolbars and table headers — page size, a status filter, a sort order.

<app-select-mini name="status" aria-label="Filter status">…</app-select-mini>

<app-select-mini> is the compact single-purpose picker — the small dropdown that sits in a toolbar or table header for a page size, a status filter, or a sort order. It is the same underlying select as <app-select>, styled tight and inline, with no label, hint, or validation shell.

Its look comes entirely from the shared @webority/theme, and the behaviour lives once in the shared <wui-select> element, so the Razor <app-select-mini> and the React <AppSelectMini> render and behave identically on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the picker above it.

Draft Active Complete 
<app-select-mini name="pg-status" aria-label="Filter status">
    <app-option value="draft">Draft</app-option>
    <app-option value="active" selected>Active</app-option>
    <app-option value="done">Complete</app-option>
</app-select-mini>
aria-label is never optionalThe playground defaults to aria-label="Filter status" so the demo stays accessible — always set it yourself, since the mini picker has no visible label.
Menu open motion product-wide via data-wui-menu-motion — pick one, then open the menus below

Basic

A compact picker with a short option set. It has no visible label, so give it an ariaLabel for its accessible name.

A compact status filter
All statuses Draft Active Complete
Show code 
<app-select-mini name="status" aria-label="Filter status">
    <app-option value="all" selected>All statuses</app-option>
    <app-option value="draft">Draft</app-option>
    <app-option value="active">Active</app-option>
    <app-option value="done">Complete</app-option>
</app-select-mini>
Always give it an ariaLabelThe mini picker has no visible label, so pass aria-label (for example "Filter status") — that is the accessible name a screen reader announces in place of a bare "combobox".

In a toolbar

Its home is inline among other controls — a rows-per-page picker beside a table, a filter beside a search box. Keep the label text tiny and the control tight.

Rows per page
Rows 10 / page 25 / page 50 / page
Show code 
<div class="d-flex align-items-center gap-2">
    <span class="wui-text-sm text-body-secondary">Rows</span>
    <app-select-mini name="pageSize" aria-label="Rows per page">
        <app-option value="10">10 / page</app-option>
        <app-option value="25" selected>25 / page</app-option>
        <app-option value="50">50 / page</app-option>
    </app-select-mini>
</div>

AppIcon & prefix

A leading icon and a static prefix make a toolbar picker self-describing without a separate label. icon takes a Bootstrap Icons name; prefix is plain text shown before the value.

Self-describing pickers
All statuses Draft Active Complete Newest Oldest A–Z
Show code 
<app-select-mini name="status" icon="filter" aria-label="Filter status">…</app-select-mini>
<app-select-mini name="sort" icon="sort" prefix="Sort:" aria-label="Sort order">…</app-select-mini>

Sizes

size takes sm or lg around the default compact 32px picker — for a denser toolbar or a slightly larger tap target.

Small, medium, large
All statuses Active All statuses Active All statuses Active
Show code 
<app-select-mini name="s" size="sm">…</app-select-mini>
<app-select-mini name="s">…</app-select-mini>
<app-select-mini name="s" size="lg">…</app-select-mini>

When to use

Use it when

  • A compact, single-purpose picker in a toolbar or table header — page size, a status filter, a sort order.
  • The choice sits inline next to other controls and a full labelled field would be too heavy.
  • The option set is short and self-explanatory from the values alone.

Reach for something else when

  • It is a form field that needs a label, hint, or validation. → AppSelect
  • The list is long enough to need type-to-find. → AppSelect (searchable)
  • The user picks several values at once. → AppMultiSelect

Best practices

Do
10 / page 25 / page 50 / page
Option labels that carry their own unit — "25 / page" — read clearly out of context.
Don't
10 25 50
Bare numbers in a toolbar don't say what they change.
Do
All statuses Draft Active Complete
A short, self-explanatory set is exactly the mini picker's job.
Don't
Industrial DC Commercial rooftop Utility substation Telecom tower Residential complex Data centre campus Wind farm
A long list belongs in AppSelect with searchable, not the compact picker.

Every option

The whole surface of the component, one cell per value.

size — every value

size (default)
All statusesActive
size="sm"
All statusesActive
size="lg"
All statusesActive

icon

(none)
All statusesActive
icon="filter"
All statusesActive
icon="sort"
NewestOldest

prefix

(none)
NewestOldest
prefix="Sort:"
NewestOldest
icon="sort" prefix="Sort:" — combined
NewestOldest

state

disabled
All statusesActive
no option selected — shows placeholder
All statusesActive
placeholder="Sort by…"
NewestOldest
no <app-option> children — empty list
class="toolbar-sort"
NewestOldest
long option label — overflow inside the menu
Industrial DC — large-scale rooftop installationCommercial rooftop

Attributes

AttributeTypeDefaultDescription
namestring—Field name the picker posts its value under.
aria-labelstring—Accessible name — set it, as there is no visible label.
placeholderstringSelect...Shown when nothing is selected.
idstring—Explicit control id.
iconstring—Leading Bootstrap Icons glyph, e.g. funnel / sort-down.
prefixstring—Static text before the value, e.g. Sort:.
sizestring—Compact-scaled size: sm / lg around the default 32px picker.
disabledboolfalseDisables the control.
<app-option> valuestring—The value of an option child. Its label is the inner content.
<app-option> selectedboolfalseMarks that option as initially selected.
valuestring—The currently selected value (React value).
classstring—Razor's spelling of React's className, carried onto the rendered <wui-select> element (this helper has no field shell to attach it to instead).