HabFieldAddon

The control in a field's prependAddon segment: a short label — usually the kind of value the field holds — that fills the segment, and most often opens a menu.

API token

Language

Region

The kind of each value, chosen in the field it qualifies: a text, a choice and a search.

<HabInput v-model="token" label="API token">
	<template #prependAddon>
		<HabMenu :items="kinds" align="left">
			<template #trigger>
				<HabFieldAddon tone="warning" chevron>Secret</HabFieldAddon>
			</template>
		</HabMenu>
	</template>
</HabInput>

Where it goes

HabInput, HabSelect, HabAutocomplete and HabTreeSelect each take a prependAddon slot: a segment flush at the start of the box, its full height, divided from the value by a line. The addon is drawn to fill exactly that — no border, the segment's own start corners, and a hover that tints only the addon. A HabButton there would draw a button inside the field, its outline and corners against the segment's.

It is a plain button, so anything that takes a trigger takes it: HabMenu passes it as-child, and the menu's ARIA and open handler land on it.

Tone

tone inks the label. Use it when the kinds a field can hold have colours of their own elsewhere in the product — a secret, a reference to another setting — so the field names its kind the way the rest of the product does. neutral is the default.

There is no error tone, on purpose: a kind is not a fault. A field whose value is wrong says so through its own state.

Read-only and disabled

The addon follows the field it sits in: in a read-only field it is read-only, in a disabled field it is disabled, and you pass neither. Read-only keeps the label in its ink, drops the chevron and takes the addon out of the tab order: the kind is there to be read. :readonly="false" keeps the addon usable in a read-only field or region; nothing opts out of a disabled field.

A toggle at the end

In HabInput's appendAddon — the segment at the end of the box, and HabInput's alone: the other fields end in their chevron — the addon is usually a toggle on the value rather than its kind. pressed tints it and announces it as pressed; leave pressed unset on an addon that is not a toggle, since false announces one that is off. The addon takes its segment's corners, so it rounds the right way at either end.

Accessibility

The addon's label is its accessible name, so it should say the kind ("Secret"), not an action. As a menu trigger it is announced as a button with a popup and its expanded state. The field's own label still names the field; the addon does not.

Keyboard focus on the addon draws an outline inside it. The field's border turns accent too, as it does for the value, so the inset outline is what tells the two apart.

API

Props

Prop	Type	Default	Description
chevron	boolean	false	A ▾ after the label: the addon opens a menu. Hidden while read-only.
disabled	boolean	false	Cannot be used. A disabled field disables its addon whatever this says.
pressed	boolean	undefined	A toggle that is on — the ".*" of a search read as a regular expression. Tinted and announced as pressed (aria-pressed). Leave it unset for an addon that is not a toggle: false announces a toggle that is off.
readonly	boolean	undefined	Shows its label, opens nothing. Unset, it follows the field it sits in and any surrounding HabReadonly; false keeps it usable inside either.
tone	"neutral" | "accent" | "info" | "success" | "warning"	"neutral"	The label's ink; see HabFieldAddonTone.

Slots

Slot	Bindings	Description
default	any	The label: what kind of value the field holds.