Slotted error text in a form item

React

Angular

Web Components

const [value, setValue] = useState("");

  const onChange = (detail: GoabInputOnChangeDetail) => {
    setValue(detail.value);
  };

  const errorMessage = (
    <>
      <i>This is </i> slotted <b>error text</b>.
    </>
  );

<GoabFormItem label="First name" error={errorMessage}>
      <GoabInput onChange={onChange} value={value} name="item" error={true} />
    </GoabFormItem>

Use the error slot in a form item to display formatted error messages with custom styling like bold or italic text.

When to use

Use this pattern when:

You need to display error messages with custom formatting
Error text requires links, bold, or other inline styling
Standard string-based error messages are insufficient

Considerations

Keep error messages clear and actionable
Use formatting sparingly to highlight key information
Ensure error text is accessible and readable by screen readers
The input component should also have its error prop set to true for proper styling