GrInput

The clear and show-password buttons stand in the ordinary tab order: Tab from the field leads to the cross, then to the eye. They used to carry tabindex="-1" — the widget was declared accessible (aria-label, aria-pressed), but there was no using it without a mouse.

Both buttons return the focus to the field after being pressed, so clearing does not drop the focus into nowhere: the button disappears together with the emptied value.

#prefix and #suffix are drawn in two forms, and those are different entities rather than the styling of one.

segment (the default) is a compartment of its own, cut off by a border and aligned to the size step: a field with ”₽” and a field with “USD” stand in a column instead of dancing by width. That is what is expected of a money field and of a field with a unit.

addon="inline" is an ornament inside the border: no separator, no width of its own. The magnifier of a search bar, a currency symbol, a counter. In a segment the magnifier would read as a field with a button glued to it, so an icon inside the border could not be expressed with an addon at all — people simply gave it up.

<GrInput v-model="query" addon="inline">
  <template #prefix>
    <GrIcon size="sm"><span class="i-lucide-search" /></GrIcon>
  </template>
</GrInput>

The padding of the field is computed from the measured width of the addon in both modes: the text starts right after the ornament rather than in an empty compartment. prefixFixed/suffixFixed and *MinWidth/*MaxWidth work as before — they are about the segment.

A meaningful addon is announced

Addons are hidden from the screen reader by default: most often there is a search magnifier or a glyph repeating the label of the field there, and a second reading gets in the way.

But https:// in an address field or ₽ beside a label without a currency can be the only place where it is said what to enter. For them there is describeAddons.

It does not merely lift the hiding: a <div> beside the field does not enter its accessible name, and a screen reader would stumble on the text only while walking the page — not when it is needed. That is why the addon goes into the aria-describedby of the field itself.

<GrInput v-model="site" describe-addons>
  <template #prefix>
    https://
  </template>
</GrInput>

Mark a decorative icon inside the slot aria-hidden yourself: the prop lifts the hiding from the whole wrapper rather than taking its content apart.

shape="pill" gives the same rounding as GrSegmented; the default is box, the rounding of the control scale.

The shape brings the horizontal padding with it: on a pill it is no less than half the height, otherwise the text runs into the arc. The addons follow it too — the compartment is clipped along the outer contour by the shell (overflow-hidden), while its separating border stays straight.

The axis and its limits — ../sizes.md; it also says which fields of a form did not get a shape and why.

showCount draws 12 / 60 (or just the length, if maxlength is not set) and links the counter to the field through aria-describedby — on focus a screen reader reads the remainder together with the label.

Exhausting the limit is additionally announced by a role="status" live region (gr.input.limitReached). The region stays silent until the limit is reached: reading every character aloud is a guaranteed way to make the field unusable for a screen reader.

<GrInput v-model="bio" :maxlength="60" show-count clearable />

clear exists separately from update:modelValue because by the value alone a programmatic clearing cannot be told from a manual erasure — and the reaction of a form to them is usually different.

Clearing with the button sends all three events in a row: update:modelValue, change, clear. It is as much a commitment of the value as the departure of the focus — a subscription for “the value has been set” would miss exactly it. The native equivalent behaves the same way: the cross of an <input type="search"> sends both input and change.

<GrInput ref="field" v-model="value" />

field.value gives away focus(), blur() and select(). The last one is the companion of focus() for the “the value has been filled in, let it be overwritten” scenario.

A spinner in the trailing area plus aria-busy on the field: checking whether a login is taken, autosaving, loading a reference list. Typing is not blocked in the process — for a prohibition there are disabled and readonly. The spinner reserves room on the right on a par with the buttons, so the text does not move under it.

state (success / warning / danger) colours the border and the focus ring; invalid (its own prop or an error from GrFormField) always leads to the danger look.

success and warning additionally show an icon and a hidden label that goes into the aria-describedby of the field. A border colour as the only carrier of meaning is a WCAG 1.4.1 matter: the icon adds a shape, the label adds a programmatic channel, which these two states lack (there is no ARIA equivalent of aria-invalid for them). danger gets no icon: its meaning is already carried by aria-invalid and the error text from GrFormField.

The sign goes out when the field is declared invalid: a “correct” tick beside aria-invalid="true" would contradict it.

A blocked field is dimmed with the --gr-muted background and --gr-muted-fg text rather than with transparency: opacity dilutes text tokens tuned to AA and lowers the contrast.

The classes of the sizes, the alignment and the states live in grInputStyles.ts and are declared in the safelist as a whole — together with the horizontal padding, which the same size also needs as a number (the addons set the padding with an inline style, and that overrides a class).

text, email, password, number, search, tel, url. The last two change the on-screen keyboard on mobile and switch on the browser’s validation of the format.