Usage

Indicators are the selection pictures shared by a checkbox, a radio, a selector, and a Markdown task list. They are decorative. The owning control keeps the input, the role, the accessible name, the focus, and the keyboard. The indicator only turns state into a picture. That split is what makes them themeable: restyle one through its class, or replace the component by name.

<script setup lang="ts">
import { CheckIndicator } from '@astryx-vue/core/Indicator'
</script>

<template>
  <CheckIndicator state="checked" />
</template>

This is the mark on a chosen option. Unchecked, and with nothing in the slot, it renders nothing, so a list shows no empty box beside every row. It has no chrome of its own. It is the glyph, so a class passed by the host lands on the same element as the icon.

Map this name to Radio Indicator when every single-selection mark should be a circle, including the empty circle on an unchosen row. The box is Checkbox Indicator.

Anatomy

Element	Description
Chrome (checkbox, radio)	Required on the box and the circle, which draw in every state. The check indicator is the state mark itself and has no chrome of its own.
State mark	The checkmark shown when the option is chosen. Unchecked draws nothing unless the slot has something renderable.

Best practices

Guidance	Practices
Do	Restyle the stable class first. Replacing the component is the heavier path, for when the shape itself is wrong.
Do	Decide whether slot content replaces the mark with isRenderable, not a null check. The helper is shallow: it excludes null, undefined, booleans, and the empty string. An element still counts when its descendants later render nothing. A host writes a spinner with v-if="busy". When that condition is false, a null check deletes the chosen check.
Do	A replacement must set aria-hidden. The owning control provides the role and the accessible name. A visible indicator would be announced twice.
Do	Use theme tokens for every color, radius, and border width in a replacement.
Do	Render a single root element, and let it keep the border radius the focus ring should follow. The control paints that ring onto the indicator when the real input is visually hidden. Do not draw a second ring.
Don't	Pass hover or pressed state in as props. Hover reaches the graphic through the ancestor class astryx-indicator-scope.
Don't	Assume the graphic is mounted only when it is selected. The host renders it in every state and passes state. That is what lets a replacement draw an empty circle on an unchosen row.

Examples

States

smUncheckedCheckedDisabled

mdUncheckedCheckedDisabled

Unchecked reserves no box. Checked draws the glyph at both sizes. Disabled uses the disabled icon color.

Replace by name

Default check

Radio instead

The same row of marks. The left card is the default check. Inside the theme on the right, that name draws a circle, including the empty circle when nothing is chosen.

Replace the mark while loading

CheckboxCheck

A spinner in the slot holds the check's place whether or not the row is chosen. Turning it off removes that place when the row is unchosen.