XDS — Design System

FieldLabel@xds/core · XDSFieldLabel v0.0.13

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.

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

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.

Showcase source

tsx
'use client';
import {XDSFieldLabel} from '@xds/core/Field';
import {XDSVStack} from '@xds/core/Layout';
const LockIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="3" y="11" width="18" height="11" rx="2" />
    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </svg>
);
export default function FieldLabelShowcase() {
  return (
    <XDSVStack gap={4}>
      <XDSFieldLabel
        label="Email address"
        inputID="email-input"
        isRequired
      />
      <XDSFieldLabel
        label="Phone number"
        inputID="phone-input"
        isOptional
        description="Include country code for international numbers"
      />
      <XDSFieldLabel
        label="API key"
        inputID="api-input"
        labelTooltip="Your API key can be found in the developer settings"
        labelIcon={LockIcon}
      />
      <XDSFieldLabel
        label="Disabled field"
        inputID="disabled-input"
        isDisabled
      />
    </XDSVStack>
  );
}

Usage

import {XDSFieldLabel} from '@xds/core/Field'

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.

tsx

'use client'; import {XDSFieldLabel} from '@xds/core/Field'; import {XDSVStack} from '@xds/core/Layout'; const LockIcon = (props: React.SVGProps<SVGSVGElement>) => ( <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" {...props}> <rect x="3" y="11" width="18" height="11" rx="2" /> <path d="M7 11V7a5 5 0 0 1 10 0v4" /> </svg> ); export default function FieldLabelShowcase() { return ( <XDSVStack gap={4}> <XDSFieldLabel label="Email address" inputID="email-input" isRequired /> <XDSFieldLabel label="Phone number" inputID="phone-input" isOptional description="Include country code for international numbers" /> <XDSFieldLabel label="API key" inputID="api-input" labelTooltip="Your API key can be found in the developer settings" labelIcon={LockIcon} /> <XDSFieldLabel label="Disabled field" inputID="disabled-input" isDisabled /> </XDSVStack> ); }