Field Props

Name	Type	Default	Description
label	string	Required	Visible label. Still names the control when visually hidden.
isLabelHidden	boolean	false	Visually hides the label and description without removing accessible associations.
description	string	—	Helper text between the label and control.
isDisabled	boolean	false	Disabled state. Field/FieldLabel only style the label. Consumers disable their custom control.
isOptional	boolean	false	Shows an optional indicator and takes precedence over isRequired.
isRequired	boolean	false	Shows a required indicator; TextInput also sets aria-required.
labelIcon	Component	—	Vue icon component before the label. The labelIcon slot takes precedence.
labelTooltip	string	—	Info button beside the label, available on hover, keyboard focus and click.
optionalLabel	string	Optional	Localized optional indicator.
requiredLabel	string	Required	Localized required indicator.
inputId	string	Required	ID of the labeled control. Must match the control id.
labelId	string	{inputId}-label	Label element ID, also used with aria-labelledby for groups.
descriptionId	string	{inputId}-description	Description ID, referenced by aria-describedby.
isGroupLabel	boolean	false	Uses a span to label groups such as radiogroup instead of a single-control label.
status	FieldStatusInput	—	Status type, optional message and custom messageId.
statusVariant	'attached' | 'detached' | 'tooltip'	attached	Tooltip hides the inline message but retains its description and announcement. The control supplies its own tooltip button.
width	number | string	auto	Whole-field width. Numbers become pixels.

FieldLabel Props

Name	Type	Default	Description
label	string	Required	Visible label. Still names the control when visually hidden.
isLabelHidden	boolean	false	Visually hides the label and description without removing accessible associations.
description	string	—	Helper text between the label and control.
isDisabled	boolean	false	Disabled state. Field/FieldLabel only style the label. Consumers disable their custom control.
isOptional	boolean	false	Shows an optional indicator and takes precedence over isRequired.
isRequired	boolean	false	Shows a required indicator; TextInput also sets aria-required.
labelIcon	Component	—	Vue icon component before the label. The labelIcon slot takes precedence.
labelTooltip	string	—	Info button beside the label, available on hover, keyboard focus and click.
optionalLabel	string	Optional	Localized optional indicator.
requiredLabel	string	Required	Localized required indicator.
inputId	string	Required	ID of the labeled control. Must match the control id.
labelId	string	{inputId}-label	Label element ID, also used with aria-labelledby for groups.
descriptionId	string	{inputId}-description	Description ID, referenced by aria-describedby.
isGroupLabel	boolean	false	Uses a span to label groups such as radiogroup instead of a single-control label.

FieldStatus Props

Name	Type	Default	Description
type	'error' | 'warning' | 'success'	Required	Status meaning and color.
message	string	Required	Status text. An empty string hides the message box.
variant	'attached' | 'detached'	attached	Attached overlaps a bordered control. Detached suits sliders, switches and similar controls.
isVisuallyHidden	boolean	false	Keeps only the accessible description and announcement when the control supplies its own tooltip.

Slots

Field requires a default slot receiving the following properties:

interface FieldSlotProps {
  inputId: string
  labelId: string
  descriptionId?: string
  statusId?: string
  describedBy?: string
}

• Field and FieldLabel provide a labelIcon slot.
• The labelIcon slot overrides the matching prop.
• The icon is decorative.
• FieldStatus has no slots. Pass its text through message.

Status messages

interface FieldStatusInput {
  type: 'error' | 'warning' | 'success'
  message?: string
  messageId?: string
}

Announcements

• error uses an aria-live="assertive" region.
• warning uses an aria-live="polite" region.
• success uses an aria-live="polite" region.
• When the message changes, the component announces it again.
• An empty message clears the announcement region.
• The visual message does not duplicate aria-live.

Message layout

• attached: joins the message to the control. Place it beneath a bordered control inside Field.
• detached: separates the message from the control. The message includes a status icon.
• Field in tooltip mode: hidden text remains available for descriptions and announcements. The inner control supplies the tooltip button.

For a standalone FieldStatus, use detached.

Events

These three components declare no custom events.

Template refs

Each component exposes element:

Component	Element
Field	The field's root div.
FieldLabel	The label element or group span.
FieldStatus	The visual message element.

Before mounting, element is null. Without a message, FieldStatus.element is null.

Native attributes

Component	Attribute target
Field	The field root.
FieldLabel	The label group.
FieldStatus	The message element.

Pass these directly to the inner control:

• name.
• required.
• disabled.
• Control event listeners.

Imports

import type { FieldProps, FieldSlotProps, FieldStatusInput } from '@astryx-vue/core/Field'
import { Field, FieldLabel, FieldStatus } from '@astryx-vue/core/Field'
import '@astryx-vue/themes/neutral.css'

Theme

• --astryx-spacing-1: spacing between field contents.
• --astryx-spacing-2: padding for detached status messages.
• --astryx-radius-element: status message corner radius.
• --astryx-color-text-secondary: supporting text color.
• --astryx-text-label-size: label font size.
• --astryx-text-supporting-size: description and status message font size.

Status colors use the TextInput variables. See TextInput validation states for the complete list.