XDS — Design System

XDSFieldStatus@xds/core · Field

Usage

Field wraps any input control with a label, description, and validation status. Use it to build accessible forms with consistent labeling, optional/required indicators, and inline error, warning, or success feedback.

Best practices

Guidance	Practices
Do	Always provide a label for accessibility, even if visually hidden with isLabelHidden.
Do	Use the status prop with clear messages to provide inline validation feedback.
Do	Add a description when the label alone does not explain what the field expects, like format hints or constraints.
Don't	Set both isOptional and isRequired on the same field.
Don't	Use the detached status variant on bordered inputs — reserve it for checkboxes, switches, and sliders.
Don't	Hide the label without providing an alternative way for the user to understand the field purpose.

Anatomy

Element		Description
Label	required	Text identifying the field. Always rendered for accessibility, optionally hidden visually.
Description		Helper text between the label and input explaining what to enter.
Input slot	required	The input control wrapped by the field — TextInput, Select, DateInput, etc.
Status message		Inline validation feedback showing error, warning, or success with a message.
Optional/Required indicator		Badge next to the label showing whether the field is optional or required.
Label tooltip		Info icon at the end of the label with a tooltip explaining the field.

Import

ts
import {XDSFieldStatus} from '@xds/core/Field'

Props

Prop	Type	Description
typerequired	'error' \| 'warning' \| 'success'	Status type.
messagerequired	string	Status message text.
id	string	ID for aria-describedby association.
variant	'attached' \| 'detached' (default: 'attached')	Visual variant — attached overlaps the input, detached floats below.

Showcase source

tsx
'use client';
import {XDSFieldStatusComponent} from '@xds/core/Field';
import {XDSVStack} from '@xds/core/Layout';
export default function FieldStatusShowcase() {
  return (
    <XDSVStack gap={4}>
      <XDSFieldStatusComponent
        type="error"
        message="This field is required"
        variant="detached"
      />
      <XDSFieldStatusComponent
        type="warning"
        message="This username is already taken by another team"
        variant="detached"
      />
      <XDSFieldStatusComponent
        type="success"
        message="Your changes have been saved"
        variant="detached"
      />
    </XDSVStack>
  );
}