Choice & selection

AppChoiceChip

A selectable pill the user toggles on and off — filters, tags, and small choice sets.

<app-choice-chip name="filter" value="hv" label="HV power line" multiple="true" />

A choice chip is a compact pill the user clicks to select — a filter to switch on, a tag to attach, one option among a few. It holds a selection state; it does not fire an action. <app-choice-chip> is the one way to render a selectable pill; never style a .btn to fake one.

Its look comes entirely from the shared @webority/theme, so the Razor <app-choice-chip> and the React <AppChoiceChip> render identically — a chip is a chip 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 chip above it.

<app-choice-chip name="filter" value="hv" label="HV power line" />
checked is a static attribute — you own the stateThe chip re-renders server-side with whatever checked the control is set to; there's no client script flipping it. See Selectable pill below for how a real page groups these into a submittable form.

Selectable pill

A single chip toggles between selected and unselected. The checked state drives the look; the native input owns it.

One toggleable chip
Click to select; click again to clear. A checkbox chip (multiple) toggles independently.
Show code 
<app-choice-chip name="line" value="hv" label="High-voltage line" multiple="true" />
A chip is a control, not a token<app-choice-chip> is something the user toggles. A pill that merely displays a chosen value — or that the user removes with an ✕ — is an AppChip, not a choice chip.

Sizes

size scales padding, gap and font together — sm for dense filter bars, lg for a prominent choice. md is the default.

sm · md · lg
Show code 
<app-choice-chip name="sz" value="s" label="Small" size="sm" checked="true" />
<app-choice-chip name="sz" value="m" label="Medium" size="md" checked="true" />
<app-choice-chip name="sz" value="l" label="Large" size="lg" checked="true" />

Multi-select

Render a chip per option and let several be active at once — the checkbox behaviour. Keep the set small and every option visible.

Filter chips (several active)
Each chip toggles independently; more than one can be selected.
Show code 
<app-choice-chip name="hazards" value="hv" label="HV power line" multiple="true" checked="true" />
<app-choice-chip name="hazards" value="lv" label="LV power line" multiple="true" />
<app-choice-chip name="hazards" value="tel" label="Telecom" multiple="true" />

Single-select

Pass multiple="false" and a shared name to make the chips mutually exclusive — exactly one stays selected.

Radio chips (one at a time)
A shared name groups the chips; selecting one clears the rest.
Show code 
<app-choice-chip name="frequency" value="daily" label="Daily" multiple="false" checked="true" />
<app-choice-chip name="frequency" value="weekly" label="Weekly" multiple="false" />
<app-choice-chip name="frequency" value="monthly" label="Monthly" multiple="false" />
Past a handful of options, switch controlsChips shine for two-to-a-few visible choices. When the list grows past what fits on a line (roughly 6+), a single-select becomes AppSelect and a multi-select becomes AppMultiSelect.

When to use

Use it when

  • A filter the user turns on and off — narrow a list by tag, status, or type.
  • Picking among a small set of options shown as pills, all visible at once.
  • Multi-select tags where several choices can be active together.

Reach for something else when

  • It triggers an action rather than holding a selection. → AppButton
  • It only displays or removes a chosen value (a token). → AppChip
  • You are picking one of many (6+) options. → AppSelect
  • Each option needs an icon, title, and description. → AppChoiceCard

Best practices

Do
A few short, scannable pills — the user sees every option and toggles at a glance.
Don't
A sentence crammed into a chip. Long labels belong in a select or a checkbox list.
Do
checked reflects real selection state that the form reads back — a proper control.
Don't
A chip used to fire an action. Actions are buttons — a chip should hold a choice.

Every option

The whole surface of the component, one cell per value — input type, selection state, the count badge (including the falsy-but-defined 0), and a long-label overflow case.

input type

multiple="true" — checkbox (default)
multiple="false" — radio

selection state

checked="false"
checked="true"

count — matching-row badge

(no count)
count="12"
count="12" + checked (badge inverts)
count="0" — falsy but defined, still renders

content

long label — overflows the pill rather than wrapping the grid
class="analytics-chip" — extra class alongside choice-chip

Attributes

Unclaimed attributes land on a different element than ReactReact spreads unknown props onto the outer <label>; the Razor tag helper harvests them onto the inner <input> instead (matching AppCheck). A data-testid or id resolves to a different node on each surface.
AttributeTypeDefaultDescription
namestring—Groups the chips. A shared name makes radio chips mutually exclusive.
valuestring—The value this chip posts when selected.
labelstring—The chip text — keep it short and scannable.
checkedboolfalseWhether the chip starts selected.
multiplebooltrueCheckbox (multi-select) when true, radio when false.
countstring—A matching-row count, e.g. "Active 12". Inverts when the chip is selected. Rendered whenever set, so "0" still shows.
sizestringmdsm | md | lg — pill size; padding, gap and font step together.
classstring—Extra classes on the chip's label element; merges with the base choice-chip class.
(unclaimed attrs)data-*, aria-*, …—Any other attribute lands on the <input>, not the <label> — see the callout above.