Supporting Text

A cross-platform React component for displaying supporting text around form fields, including labels, helper text, descriptions, and error messages with proper accessibility.

Installation

npm install @xsolla/xui-supporting-text
# or
yarn add @xsolla/xui-supporting-text

Demo

All Variants

import * as React from 'react';
import { SupportingText } from '@xsolla/xui-supporting-text';

export default function AllVariants() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <SupportingText variant="label">Label text</SupportingText>
      <SupportingText variant="helper">Helper text with guidance</SupportingText>
      <SupportingText variant="description">Description text for context</SupportingText>
      <SupportingText variant="error">Error message</SupportingText>
    </div>
  );
}

Different Sizes

import * as React from 'react';
import { SupportingText } from '@xsolla/xui-supporting-text';

export default function Sizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <SupportingText size="xs">Extra small</SupportingText>
      <SupportingText size="sm">Small</SupportingText>
      <SupportingText size="md">Medium</SupportingText>
      <SupportingText size="lg">Large</SupportingText>
      <SupportingText size="xl">Extra large</SupportingText>
    </div>
  );
}

With Icon

import * as React from 'react';
import { SupportingText } from '@xsolla/xui-supporting-text';
import { Info } from '@xsolla/xui-icons-base';

export default function WithIcon() {
  return (
    <SupportingText variant="helper" icon={<Info />} showIcon>
      Click here for more information
    </SupportingText>
  );
}

Anatomy

import { SupportingText } from '@xsolla/xui-supporting-text';

<SupportingText
  variant="helper"          // label, helper, description, error
  size="md"                  // xs, s, m, l, xl
  icon={<Icon />}           // Optional icon
  showIcon={true}           // Show icon
  id="field-hint"           // ID for aria-describedby
  aria-label="Hint"         // Accessible label
>
  Helper text content
</SupportingText>

Examples

Form Field with Label and Error

import * as React from 'react';
import { SupportingText } from '@xsolla/xui-supporting-text';
import { Input } from '@xsolla/xui-input';

export default function FormField() {
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState('');

  const validate = (value: string) => {
    if (value && !value.includes('@')) {
      setError('Please enter a valid email address');
    } else {
      setError('');
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <SupportingText variant="label" id="email-label">
        Email address
      </SupportingText>
      <Input
        value={email}
        onChangeText={(text) => {
          setEmail(text);
          validate(text);
        }}
        aria-labelledby="email-label"
        aria-describedby={error ? 'email-error' : 'email-hint'}
        error={!!error}
      />
      {error ? (
        <SupportingText variant="error" id="email-error">
          {error}
        </SupportingText>
      ) : (
        <SupportingText variant="helper" id="email-hint">
          We'll never share your email
        </SupportingText>
      )}
    </div>
  );
}

Password Requirements

import * as React from 'react';
import { SupportingText } from '@xsolla/xui-supporting-text';
import { InputPassword } from '@xsolla/xui-input-password';

export default function PasswordField() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <SupportingText variant="label">Password</SupportingText>
      <InputPassword extraSee />
      <SupportingText variant="description" size="sm">
        Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
      </SupportingText>
    </div>
  );
}

Character Count Helper

import * as React from 'react';
import { SupportingText } from '@xsolla/xui-supporting-text';
import { Textarea } from '@xsolla/xui-textarea';

export default function CharacterCount() {
  const [text, setText] = React.useState('');
  const maxLength = 280;
  const isOverLimit = text.length > maxLength;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <SupportingText variant="label">Bio</SupportingText>
      <Textarea
        value={text}
        onChangeText={setText}
        placeholder="Tell us about yourself"
      />
      <SupportingText
        variant={isOverLimit ? 'error' : 'helper'}
        size="sm"
      >
        {text.length}/{maxLength} characters
      </SupportingText>
    </div>
  );
}

Field Group with Description

import * as React from 'react';
import { SupportingText } from '@xsolla/xui-supporting-text';
import { Checkbox } from '@xsolla/xui-checkbox';

export default function FieldGroup() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <SupportingText variant="label">Notification preferences</SupportingText>
      <SupportingText variant="description" size="sm">
        Choose how you'd like to receive updates from us
      </SupportingText>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 8 }}>
        <Checkbox label="Email notifications" />
        <Checkbox label="Push notifications" />
        <Checkbox label="SMS notifications" />
      </div>
    </div>
  );
}

API Reference

SupportingText

SupportingTextProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Text content to display. | | variant | "label" \| "helper" \| "description" \| "error" | "helper" | Visual variant. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Text size. | | icon | ReactNode | - | Icon to display after text. | | showIcon | boolean | false | Whether to show the icon. | | id | string | - | HTML id for accessibility linking. | | aria-label | string | - | Accessible label. | | aria-describedby | string | - | ID of element this text describes. | | testID | string | - | Test identifier. |

Variants

| Variant | Color | Use Case | | :------ | :---- | :------- | | label | Primary | Field labels | | helper | Tertiary | Guidance and hints | | description | Tertiary | Additional context | | error | Alert | Validation errors |

Accessibility Features

• Error variant: Uses role="alert" for immediate announcement
• Live regions: Error messages use aria-live="polite"
• ID linking: Use id with aria-describedby on form fields
• Color contrast: Appropriate colors for all variants
• Icon handling: Icons are hidden from screen readers