ErrorText

Inline error message paragraph for a form control; announces itself via role="alert" the moment it renders.

stable
since v0.1.0
0.4 kB
forms
feedback

Preview

tsx

import { ErrorText } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <ErrorText>Please enter a valid email address.</ErrorText>;
}

Paired with an Input

Render ErrorText conditionally below a field and reference it via aria-describedby. Set invalid on the field so the visual treatment stays in sync.

Preview

Open

tsx

import { ErrorText, Input, Label, Stack } from '@arshad-shah/cynosure-react';
import { useId, useState } from 'react';

export default function Example() {
  const errorId = useId();
  const inputId = useId();
  const [value, setValue] = useState('nope');
  const invalid = !value.includes('@');
  return (
    <Stack gap="2" style={{ width: 320 }}>
      <Label htmlFor={inputId}>Email</Label>
      <Input
        id={inputId}
        type="email"
        value={value}
        onChange={setValue}
        invalid={invalid}
        aria-describedby={invalid ? errorId : undefined}
      />
      {invalid ? <ErrorText id={errorId}>Please enter a valid email address.</ErrorText> : null}
    </Stack>
  );
}

Inside FormField

Inside a FormField, prefer FormMessage — it auto-wires aria-describedby and renders an ErrorText only when the field is invalid.

Preview

Open

tsx

import {
  Form,
  FormControl,
  FormField,
  FormLabel,
  FormMessage,
  Input,
  Stack,
} from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [email, setEmail] = useState('');
  const invalid = email.length > 0 && !email.includes('@');
  return (
    <Form>
      <Stack gap="4" style={{ width: 360 }}>
        <FormField name="email" invalid={invalid} required>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input type="email" value={email} onChange={setEmail} />
          </FormControl>
          <FormMessage>{invalid ? 'Needs an @ symbol.' : undefined}</FormMessage>
        </FormField>
      </Stack>
    </Form>
  );
}

API

PropTypeDefaultDescription

Accessibility

Defaults to role="alert" — assistive tech reads the message as soon as the element appears in the DOM.
Associate the error with its field by adding aria-describedby={errorId} on the input and a matching id on the ErrorText.
Keep messages short, specific, and actionable — “Email is required” beats “Invalid input”.
Avoid mounting an empty ErrorText; render the element only while there’s a message to announce.

Recipes

Render conditionally — mounting it is what triggers the announcement.
Pair with HelperText to keep persistent guidance separate from transient validation.
When using FormField, switch to FormMessage for automatic wiring.