InputGroup

Data entry component. This page is the API reference, generated from the source code. Usage guidance and live examples are on the Chinese page.

HeadlessStylesVueReactWeb Components

Anatomy

Parts in bold are required.

data-scope="input-group": root · item

API reference

Descriptions of individual props, events and slots are written in Chinese and appear on the Chinese page.

Artifacts

Layer	Value
Custom element	<xh-input-group>
Vue components	XhInputGroupItem XhInputGroupRoot
State machine	None: connect computes attributes from props directly
Skin	@xihan-ui/styles/input-group.css

Props

Prop	Type	Required
size	Size
variant	ControlVariant

connect API

getXxxProps() returns the host attributes of the matching part.

Member	Type
getRootProps	() => T['element']
getItemProps	() => T['element']

Accessibility

Keyboard

Specification: W3C APG. Each row is a stable behavior id that the conformance tests cover; the conditions and effects are described on the Chinese page.

No keyboard interaction: the component takes no focus, or focus behavior comes entirely from native elements.

Style reference

Skin

@xihan-ui/styles/input-group.css is written against [data-scope="input-group"][data-part="root"] part selectors; the published build uses the mount class .xh-scope-input-group in place of data-scope (same specificity) and sits in the xihan.components layer. Put overrides in xihan.overrides; the part selectors work as usual.

Data attributes

Produced by connect; valueless attributes are omitted while their condition does not hold.

Part	Attribute	Value
root	data-size	props.size
root	data-variant	props.variant

CSS variables

The public override slots, generated from what the standalone skin actually consumes.

Variable	Part	CSS property	State	Default from
--xh-input-group-bg	root	background	default	--xh-_input-group-bg
--xh-input-group-bg-disabled	root	background	disabled has([data-xh-field-chrome][data-disabled]) xh-field-chrome	--xh-bg-subtle
--xh-input-group-bg-focus	root	background	focus-within	--xh-_input-group-bg-focus
--xh-input-group-bg-hover	root	background	disabled hover invalid not(:focus-within) not(:has([data-xh-field-chrome]:is([data-disabled], [data-readonly]) readonly xh-field-chrome	--xh-_input-group-bg-hover
--xh-input-group-bg-invalid	root	background	has([data-invalid], [aria-invalid='true']) invalid	--xh-bg-field-invalid
--xh-input-group-bg-read-only	root	background	has(:where([data-xh-field-chrome][data-readonly]) readonly xh-field-chrome	--xh-bg-subtle
--xh-input-group-border	root	border	default	--xh-_input-group-border
--xh-input-group-border-disabled	root	border-color	disabled has([data-xh-field-chrome][data-disabled]) xh-field-chrome	--xh-border-default
--xh-input-group-border-focus	root	border-color box-shadow	focus-within	--xh-_input-group-border-focus
--xh-input-group-border-hover	root	border-color	disabled hover invalid not(:focus-within) not(:has([data-xh-field-chrome]:is([data-disabled], [data-readonly]) readonly xh-field-chrome	--xh-_input-group-border-hover
--xh-input-group-border-invalid	root	border-color	has([data-invalid], [aria-invalid='true']) invalid	--xh-border-invalid
--xh-input-group-item-bg	item	background-color	default	--xh-bg-subtle
--xh-input-group-item-divider	item root	border-inline-end border-inline-start	not(:first-child) not(:has(+ [data-scope='input-group'][data-part='item']) not(:last-child)	--xh-border-default
--xh-input-group-item-fg	item	color	default	--xh-fg-default
--xh-input-group-item-font-size	item	font-size	default	--xh-_input-group-font-size
--xh-input-group-item-h	item	block-size	default	--xh-_input-group-h
--xh-input-group-item-px	item	padding-inline	default	--xh-_input-group-px
--xh-input-group-radius	control root	border-end-end-radius border-end-start-radius border-radius border-start-end-radius border-start-start-radius	default first-child is(*, [data-part='control'], [data-part='root']) is([data-part='control'], [data-part='root']) last-child	--xh-shape-control
--xh-input-group-shadow	root	box-shadow	default	--xh-_input-group-shadow
--xh-input-group-w	root	inline-size	default	--xh-control-w